CSS Sticky Footer
If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.
Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.
To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.
April 24th, 2009 at 6:36 pm
Does it really need that ugly .clearfix solution for clearing content? Applying overflow: auto or something similar on the parent div does not work?
April 24th, 2009 at 10:27 pm
Excellent, always interested in new sticky footer solutions.
BTW: The ‘HowTo page’ link has a break tag and an anchor closing tag within it, breaking the link.
April 24th, 2009 at 11:59 pm
Hey, you’ve got some garbage in the “HowTo page” link at the bottom of your article.
April 29th, 2009 at 4:42 pm
@Matt @Grant Good catch! This has been fixed, thanks for bringing that up.
April 30th, 2009 at 8:50 am
Regarding the font sizing. With relative sizing, depending on how much room you leave at the bottom of you footer, someone who sizes things bigger in their browser could force the text to be bigger than the height of the footer, thus breaking it. This method does require a fixed height for the footer.
So either leave some “expansion room” in your footer to account for that, or use the px for fixed font sizes JUST in the footer. I know that’s bad in some peoples minds, but for the typical uses of a footer (mini-site maps) it’s probably just fine.
Clearfix vs Overflow:auto? I don’t know, I’ve not had a chance to test and see if that will work in all those browsers. Or at least the ones that really matter.
Apparently there are some issues with IE8, now that that’s out. Uggggggg.
April 30th, 2009 at 6:56 pm
@Steve Welcome to CSS Vault and thanks for dropping by. The problem with fixed height footers is that it breaks for any kind of font resizing, whether it be full-page zooming (Firefox 3) or text-only zooming (Firefox 2 and blow). This happens regardless of whether or specify a fixed size for your fonts or not. Go ahead, try it.
I would guess that the chances of encountering such users are minimal, but you still end up with bad juju.
You may want to look into using
overflow:auto. It’s a very good suggestion, IMHO. I stopped using Clearfix a long time ago. Maybe you should, too.IE8 is a real bummer. To the extent that the company I work for has blocked IE8 from Windows automatic update. That’s around 40k employees worldwide we’re talking about here. Seriously someone in Microsoft should get fried. I mean, fired. Damnit, all this information is making me hungry. Time for some fired chicken.
May 1st, 2009 at 8:16 pm
I have used several of these solutions out there before, I will need to give this one a go on my next project and see the benefits for myself. Thanks!
June 12th, 2009 at 2:05 am
[...] CSS Sticky Footer If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer. (tags: css) [...]
July 21st, 2009 at 5:22 am
This does not work in IE8, when you use full screen the footer floats about 900px from the top of the site and does not stick to the bottom!!! If you’re screen isn’t high res enough you wont notice but if it is then it doesn’t work.
Useful but it is not an answer to the sticky footer question, I wish people would stop claiming to have found solutions when they haven’t.
July 21st, 2009 at 5:22 am
I know your, not you’re, oops so sorry.
September 24th, 2009 at 5:04 pm
For me the footer wouldn’t stick to the bottom in IE8. I found out that this was caused by my conditional comment ([if IE]). Changing the comment to [if lt IE 8] fixed the problem. Also, content before the footer (div, p,…) pushes the footer below the screen. Hope this helps.
September 24th, 2009 at 5:17 pm
UPDATE @Peter
The real problem was the height of the div that the conditional comment wrote.
By applying this div in IE, the parent for .wrapper became this div instead of ‘body’. And because this div had no height specified, the height of the parent for .wrapper became ‘auto’ instead of ‘100%’. Therefore the footer stuck to the bottom of the div instead of to the bottom of body.
Changing the css so that the div got a height of 100% fixed it.
January 24th, 2010 at 1:51 am
tanhz http://www.catici.biz tahmiz nedir
January 24th, 2010 at 1:56 am
veri good crazy catlak http://www.mantolamamantolama.com verici