HTML: Anchor block element inside bottom of parent block?

Question

Is there a cross browser method of attaching some content in a <div> to the bottom? One difficulty is that the <div> may have an arbitrary height applied, but I want certain content to be stuck to the bottom of it at all times.

This would have been accomplished in the bad old days like this:

<table style="height: foo;">     <tr><td valign="top">content</td></tr>     <tr><td valign="bottom">stuck to the bottom</td></tr> </table> 

Can I do this without resorting to this technique?

Answer 1

Sure, it's pretty easy. Just set the parent div with position:relative. Then, the inner item you want to stick to the bottom, just use position:absolute to stick it to the bottom of the item.

<div id="parent">     <div id="child">     </div> </div> 

.

#parent {   position:relative; } #child {   position:absolute;   bottom:0; }