Neatly Sliced

It may seem obvious after you read this, or maybe you knew it before, or maybe you didn’t and it proves immensely helpful.

I was building this site – simple with left side navigation, header, content, and footer. I wanted the footer to be flush with the bottom of the side navigation, or below the content – whichever was lowest. This was roughly my end solution:

<div id=”container”>
<div id=”nav”>
Nav lists.
</div>
<div id=”content”>
Lots of content.
</div>
<div id=”footer”>
My pretty footer.
</div>
</div>

Basic float layout, with positioning and styles detailed here:

*{
margin:0;
padding:0;
}

#container{
margin:0 auto;
width:800px;
position:relative;
}
#nav{
position:relative;
float:left;
width:190px;
overflow:hidden;
}
#content{
position:relative;
float:right;
width:590px;
}
#footer{
clear:both;
position:relative;
left:150px;
bottom:1.25em;
}

Everything is normal here, except in footer, clear:both forces the div below both left and right floats – in our case, whichever is the lowest, which is exactly what we want. We set position:relative so that we can move this baby around in relative space.

We set left:150px so that it is shoved over to the right of where the navigation would be – in your case, you would set it to the width of your navigation plus whatever padding you wish to emulate.

Finally, crucially, you set bottom:1.25em, which is appropriate if you have approximately a one line high footer. We measure this in em so that it matches whatever size font you have. If you wish it to be higher or lower, adjust as you see fit.

Hopefully it isn’t pukey in IE, as I haven’t had a chance to test that yet. It may require a negative margin-top in IE, if I recall correctly, but I might be wrong.

Regardless, fun times, leave a note if it helps, or is wrong, or you see an improvement.