The Boagworld podcast will be back on Wednesday the 14th January.
Fixed Footers without JavaScript
Published on: September 4, 2008 by Paul Boag
Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.
A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.
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" 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. Please let me know if you find any problems with it.
Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Post by Mark Ford on September 4, 2008 10:16 AM
Post by cole on September 4, 2008 10:28 AM
Post by Brian on September 4, 2008 1:28 PM
Post by Marc Wickens on September 4, 2008 8:00 PM
Post by Jim on September 5, 2008 2:58 AM
Post by rb3m on September 5, 2008 5:11 AM
Post by Mark Ford on September 6, 2008 7:37 PM
Post by Willem Jan Allaart on September 18, 2008 8:41 AM
Post by Mike on September 18, 2008 8:49 AM
Post by Hans on September 18, 2008 9:54 AM
Post by Terrence Green on September 20, 2008 7:25 PM
Post by John on September 20, 2008 7:32 PM
Post by Paul Boag on September 20, 2008 8:23 PM
Post by BillyG on September 20, 2008 10:03 PM
Post by Lance Vick on September 24, 2008 12:20 PM
Post by Steven Clark on September 25, 2008 1:00 AM
Post by Nick on September 25, 2008 1:03 AM
Post by Ben on September 25, 2008 3:49 AM
Post by Chris Hunt on September 28, 2008 11:34 PM
Post by Matijs on September 29, 2008 5:38 PM
Post by Jonny Haynes on October 2, 2008 10:33 AM
Post by Rick on October 2, 2008 3:06 PM
Post by David Hucklesby on October 5, 2008 12:19 AM
Post by Jimbo on October 10, 2008 10:55 AM
Post by ArleyM on October 20, 2008 4:05 PM
Post by Bart on October 29, 2008 8:24 PM