Can this be done...

[Emperor]

Hi guys,

I want a <div> with a pixel height and a footer inside of it that is flush at the bottom:

<div style="height: 256px;">
<div id="content">
content here
</div>
<div id="footer">
the footer
</div>
</div>

...too bad there wasn't a float: bottom. Basically, the content area will have a few lines of text and the footer will have buttons, I want the containing box to always be 256px.

Can I do it?

Thanks.

[Tippy]

Hi,

Somewhat messy, but the only way I can think of to do it would be along the lines of: (borders added for clarity)

<div style="height: 256px; border: medium double rgb(0,0,0)">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae neque vel turpis facilisis eleifend. Praesent eget erat eget pede ullamcorper sagittis. In ac nulla id purus fringilla convallis. Nulla ut eros venenatis risus dictum varius. Fusce vel neque. Etiam adipiscing, ante vel ultricies sagittis, wisi eros tincidunt elit, ut dapibus est dui ac metus. Phasellus eget mi vitae risus aliquam congue. Nullam auctor lobortis sem. Donec euismod auctor mi. Aliquam pellentesque dictum dui. Morbi vel ligula.</p>
</div>
</div>
<div id="footer" style="border: medium dotted rgb(255,0,0); position: relative; top: -26px">
the footer
</div>

with appropriate pixel value fiddling depending on the height of the footer content.

I don't like it much, it'll create a bunch of whitespace around the moved footer for anything coming after it in the flow.

I suppose you could try

<div style="height: 256px; border: medium double rgb(0,0,0); float: right;">
<div id="footer" style="border: medium dotted rgb(255,0,0); position: relative; top: 230px">the footer
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae neque vel turpis facilisis eleifend. Praesent eget erat eget pede ullamcorper sagittis. In ac nulla id purus fringilla convallis. Nulla ut eros venenatis risus dictum varius. Fusce vel neque. Etiam adipiscing, ante vel ultricies sagittis, wisi eros tincidunt elit, ut dapibus est dui ac metus. Phasellus eget mi vitae risus aliquam congue. Nullam auctor lobortis sem. Donec euismod auctor mi. Aliquam pellentesque dictum dui. Morbi vel ligula.</p>
</div>
</div>

depending on whats around it and having the footer appear in the flow before the content doesn't bother you too much.

Good luck!

[createErrorMsg]

I want a <div> with a pixel height and a footer inside of it that is flush at the bottom:

Set the div to position:relative. This will make any positioned elements inside of it take their values from within the container, not the viewport.

Set the footer to position:absolute and bottom:0;. You'll also want to give the content div a bottom margin equal to the height of the footer buttons in order to ensure that the content doesn't get overlapped, although if you're fixing the height at 256px, I would assume you're also taking steps to ensure that the content part doesn't get too long.

html:
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>

css:
#box{
position:relative;
height:256px;
}
#content{
margin-bottom: /*equal to height of the footer*/;
}
#footer{
position:absolute;
bottom:0;
height: /*whatever*/;
}

cEM

[D_Blackwell]

If #content is postioned relatively, you then have the option of absolutely positioning #footer within #content.

<div style="height: 256px; position: relative; border: .1em solid;">
<div id="content">
content here
</div>
<div id="footer" style="position: absolute; bottom: 0;">
the footer
</div>
</di