title: Position an element at the bottom of a floating div with unknown height
body: <p>I am currently trying to position an element in a way that it always is at the bottom of it's parent. What's special here is that none of the heights or widths are known. I'd like to do this without tables, if at all possible (my superior is against using those. In a very religious way).</p>
  
  <p>I tried the approach of using <code>position:relative</code> on the parent and <code>position:absolute; bottom:0;</code> on the box I want to have at the bottom. This, however, causes the box to overlap with the other content of the parent div since absolute positioning causes the parent to ignore the height of the positioned element. Some JavaScript is used to align the heights of the floating divs to each other. But disabled JavaScript should not completely break the layout (as in: cause content to overlap or break the "flow" of the page).</p>
  
  <p>Here's the fiddle with the exact structure of my markup: <a href="http://jsfiddle.net/vbeC2/27/" rel="nofollow">http://jsfiddle.net/vbeC2/27/</a></p>
  
  <p>I did read the "float: bottom" question on SO, but none of the answers really adressed my problem, hence the new question.</p>