Search code examples
htmlcsslayout

HTML: Anchor block element inside bottom of parent block?

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?

Solution

  • 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;
}