Love the web
Love the web is a design, programming, and usability blogSticky footers
3 comments
James Player 22 Nov 2008
*The footerStickAlt*
On most web pages there is a fair amount of content, enough to span the length of the screen and a bit more. Designers are usually happy with this because there is no ugly white space between the bottom of the page and the bottom of the screen. Sometimes, however, the page has a very small amount of content, and the website's footer can creep up to the middle of the screen, leaving below that dreaded white space.
Fortunately the man in blue has found an answer to this problem which positions the footer at the bottom of the screen, or the bottom of the web page (whichever is lower). It's called the footerStickAlt. footerStickAlt is an updated technique originally derived from solarDreamStudio's footerStick, which worked well except for a strange bug in FireFox.
Now for the code. The key to getting the footer to stick to the bottom of the page (even in IE6!) is to position the footer outside of the content's containing element like so:
<html>
<body>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Then you need to apply the css like so:
html {
height: 100%;
}
body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%;
}
#content {
/* this should be the height of your footer
plus a bit more to add some space between
the end of your content and the footer on
long pages */
padding-bottom: 40px;
}
#footer {
/* this should be the height of your footer */
margin-top: -30px;
}
Stick with this as an initial set up and your pages will always look nice and pretty, no matter how little content there is!
Read the next post - Backgrounds Disappear on Horizontal Scroll
3 comments submit a comment
Andrew Hovey
Player you saved the day, cheers! I'll buy you a Hop-rocker.
Johan
Thanks James, was a great help in getting my footer to stick to the bottom.
PS: When my page had very little content, this also helped :
div#footer {z-index:10}
See also http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
Kalie
You have shed a ray of sunshine into the forum. Thakns!