A footer that stays at the bottom of the browser window

Posted on 19 March 2006

The footer on this site will always be at the bottom of the browser window, unless the content is longer than the window height. In which case it will just sit naturally after the content.

To achieve this effect I found the 'footerStickAlt' method a great starting place. Although I had to add some more CSS rules in place for it to work with my design.

It works by sitting the footer outside of the browser window by setting the site height to 100% and bringing the footer back into view with negative margins.

The html and body tags are set with height: 100%. There's a container div (that doesn't contain the footer) set to relative position, with min-height: 100% and a * html hack for IE with height: 100% (IE doesn't understand min-height).

Next all you'd need is to create a bit of space at the bottom of your content (for your footer to be positioned in so it doesn't overlap it) and set your footer to position:relative with a negative top margin.

At first, my footer was floating up left of the second content column. A quick clear:both sorted that out. However, next I found that the footer was still covering up the content at the bottom of the page. Bottom padding needed to be set on the content container for ie, and bottom margins on both my content columns for firefox. This way which ever was longest would create the necessary space.

This is likely because Firefox containers need to be cleared when they contain floated elements. In this case, my content container has two columns floated inside. Usually I'd float the container to fix the problem but the content container uses margin: 0 auto to position it in the centre of the page (Note my header and footer elements span 100% widths so there is no container around the whole site).

Update

I've re-designed my site and have a new stylesheet since this article was written. The techniques still apply, although the CSS i'm now using is almost identical to the footerStickAlt method.

View the snippets archive ››