Menu
Let's say I have code like this :
<table>
<tr>
<td>
<div id="top">top</div>
<div id="bot">bottom</div>
</td>
</tr>
</table>
I'm trying to align #top to the top of the cell and #bot to the bottom through CSS.
#top { vertical-align:top; }
#bot { vertical-align:bottom; }
The above doesn't seem to work - it doesn't really seem to be having any effect at all. Here's a link to the code : http://jsfiddle.net/vKPG8/28/
Any explanations on why this is happening and how it could be fixed?
658
the accepted solution using position: absolute is not a cross-browser compatible solution for this problem, as Firefox doesn't (and according to the spec shouldn't) allow absolute positioning in table cells or elements with display:table-cell.
There doesn't seem to be a truly reliable css-only way of solving this problem, though I do have a css-only fix that works for this case. Essentially what I did is insert a before element that is tall enough to force the bottom line of text to the bottom since it has vertical-align: bottom set. This is essentially the same as putting padding-top, so it's not much of a solution.
demo: http://jsfiddle.net/Be7BT/
td {width:200px;height:100px;border:solid 1px;}
#top {
display: inline-block;
vertical-align:top;
width: 100%;
}
#bot {
display: inline-block;
vertical-align:bottom;
width: 100%;
}
#bot:before{
content: '';
display: inline-block;
height: 100px;
}
vertical-align is for inline elements and div is a block element. Try with position: absolute and top: 0 and bottom: 0.
td {
position: relative;
width: 200px;
height: 100px;
border: solid 1px;
}
#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }
Demo: http://jsbin.com/iyosac/1/edit
Check here for more info: http://css-tricks.com/what-is-vertical-align/
td {
position: relative;
width: 200px;
height: 100px;
border: solid 1px;
}
#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<div id="top">top</div><br/>
<div id="bot">bottom</div>
</td>
</tr>
</table>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
