I have some tabular data. In the last column, I have 2 divs, one that shows the vote-data, and one that shows the save-data. I would like to first div to stick to the top of the table cell, and the second div to the bottom of the table cell. Setting the table cell {postion: relative;} so I can use {position: absolute;} in the divs has no effect (surprise, surprise)
I want the grid structure a table gives me, so all the columns are lined up above each other so 3 divs wide, all floated left, won't do that.
Here is a very long sample, (included only for completeness). The part that needs to stick to the bottom of the table cell is at the bottom of the example with a class name of 'should-float-to-bottom' and the part that should stay at the top is classed 'should-stick-to-the-top'.
<html>
<head>
<style type="text/css" media="screen">
.feedback { position: relative; width:100px; height=100%}
.should-float-to-bottom, .should-stick-to-the-top{ position: absolute; right: 0; background: #ccc; }
.should-stick-to-the-top { top: 0;}
.should-float-to-bottom{ bottom: 0; }
.dark {background-color: #ddd;}
form {margin: 0px;}
</style>
</head>
<body>
<table width='50%'>
<tr class="dark">
<td class="meta">
Some Stuff in Here with varying widths
</td>
<td class="bookmark-object">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td>
<div class='feedback'>
<div class="should-stick-to-the-top">
<div class="vote-data">
<form method="POST" action="/bookmarks/vote/" rel="vote">
<span class="score upscore">1</span> SpriteBtns <span class="score dnscore">0</span>
</form>
</div>
<div class="show-voters">
<a href="/profiles/voters/bookmark/7">See Who Voted</a>
</div>
</div>
<div class="should-float-to-bottom">
Saved once
<br>
(including you)
</div>
</div>
</td>
</tr>
</table>
</body>
</html>