HTML: Anchor block element inside bottom of parent block?

css, html, layout

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

Problem

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?

Original source