I need to align two divs inside a table cell, one at the top and the other at the bottom.
Check out this demo on jsFiddle http://jsfiddle.net/davew9999/3Mwz5/11/ to see the HTML structure I am working with. Here is the code:
HTML
<table>
<tbody>
<tr>
<td>
<div class="cell">
<div class="top">The content of this div varies in length so setting fixed height wouldn't work. It could be long or short.</div>
<div class="bottom" >This bottom div should always stick to the bottom of the table cell, also dynamic in height.</div>
</div>
</td>
<td>
<div class="cell">
<div class="top">Not much text here.</div>
<div class="bottom">Just like above, this bottom div should adjust to its content's height.</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS
tr {
vertical-align: baseline;
}
td {
padding: 10px;
}
.cell {
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
}
Many solutions available involve setting a height on the wrapper div (class "cell"), but that won't work for me due to dynamic content.
I attempted calculating the td element's height upon loading and applying it to the "cell" div. This worked until browser window resize changed the table cell's height. Resizing triggers many events, making it impractical for over 200 td elements in IE8.
Splitting the content between rows might be a temporary fix, but I'm seeking a CSS or better CSS+JavaScript solution than what I've tried.