Text aligned to top and bottom of cell
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>
I have a better idea, use nested table:
<table width="100px" height="100px" border=1>
<tr>
<td valign="top">top</td>
</tr>
<tr height=100%>
<td valign="bottom">bottom
</td>
</tr>
</table>