See it in action: View my demo with the footer at the bottom

The main features

• Works in all modern, standards compliant browsers

  Compatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

• Fails gracefully on older browsers

  Older non-standards compliant browsers position the footer under the content as per normal. We can't help it if people are using an out of date browser, all we can do is reward people who have upgraded by giving them a better browsing experience through progressive enhancement.

• Longer content pushes the footer off the page

  On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isnÕt always taking up precious reading space.

• 100% valid CSS with no hacks

  The CSS used in this demo is 100% valid and contains no hacks.

• No JavaScript

  JavaScript is not necessary because it works with pure CSS.

• iPhone compatible

  This method also works on the iPhone and iPod Touch in the mobile Safari browser.

• Free to download

  Simply save the source code of my demo page and use it however you like.

There is only one limitation

You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.

If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about Š just set your footer height to a pixel value and away you go.

So how does it work?

It's actually not that complicated. There are two parts to it - the HTML and the CSS.

The HTML div structure

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That's it, all the magic happens in the CSS.

The CSS

footer test