This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

Firstly, here’s a demonstration.

The HTML

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

The 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 } 

IE6 Stylesheet
body, #container {height: 100%;}< this should be referenced using a conditional comment:
<!--[if lt IE 7]> <link href="css/ie6.css" mce_href="css/ie6.css" rel="stylesheet"
type="text/css" media="screen" > <![endif]-->

How it works

As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

• #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
• #footer is positioned absolutely at the bottom of #container
• #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

Known Issues

The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

For example, if your mark-up was:
<div id="extraContainer"> <div id="container"> <div id="content"></div>
<div id="footer"></div> </div> </div>
In your IE specific CSS you’d need to specify:
body, #extraContainer, #container {height: 100%;}

Conclusion

This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time.

technique developed by Ed Merritt at HeadScape.