There have been a few “sticky footer” techniques that have come out in the past couple of years. Some rely on JavaScript. Some rely heavily on negative margins and a boat load of CSS. This latest method from Boagworld is probably the simplest and most light weight technique I’ve seen.

Using a single wrapping DIV container and a little bit of smart absolute positioning, you can get a footer to stick to the bottom of your browser window when there isn’t enough copy to fill the page, yet have it also act perfectly normal when there is enough copy (check out the demo). Looking at the code (seen below), it’s hard to imagine that no one has thought of this one before.

HTML

<div id="container">
   <div id="content"></div>
   <div id="footer"></div>
</div>

CSS

*, body {margin: 0; padding: 0;}
#container {display: block; position: absolute; min-height: 100%;}
#content {display: block; margin-bottom: 3em;}
#footer {position: absolute; display: block; bottom: 0; height: 3em }

That’s essentially it at the bare minimum. You’ll need to tweak the code as you see fit for your own application, but the base is pretty solid. I will definitely be utilizing this method in a few upcoming projects.

There is a single line of CSS that needs to be added for IE6, but we’re all used to having to compensate for that older application in one way or another. This technique has also been tested down to IE5.5, so for those few of you still supporting the older stuff, it looks like you’re covered as well.