New CSS3 Sticky Footer Tutorial
All 4 work indentical and flawlessly in all modern browsers IE8+. For those that prefer to keep your code clean, and like the option to either put your footer nicely tucked away within the wrapper, or instead prefer the more typical footer placement outside the wrapper, this is for you. The #wrap:after bit in Method 1 and 2 is what prevents the footer from flowing over the containers inner content. I like this method because you don't have to worry about adding any extra non-semantic elements, or padding or other to any inner elements to account for the footer. I purposefully styled the demos extremely plain, and placed the h1/h2 outside the wrap, so you could see just how simple it can be, exactly what code is essential, and so there is no other code to get in the way of your understanding. And since there is no inner content inside the demos wrap there is nothing to stop the footer. Therefore you'll just have to trust me that when you use the code it will work as expected, as you will have content within your container. Ahhh - OK - here are Demos 1 through 4 with inner content added so you can test the footer in action Demo 1 - Demo 2 - Demo 3 - Demo 4. And a shot out to Paul O'B for pointing me to box-sizing:border-box.
At the time of writing, if using Method 1 and 2, for Opera 12.11 (and maybe beyond) and IE8 only, you have to add this stupid body:before,#wrap:before shit. Opera needing the body:before and IE8 needing the #wrap:before. This is the only fix I have found for them "yet". Alternatively you can feed IE8 display table using CC's (AKA IE Conditional Comments) on the #wrap instead of #wrap:before. I prefer the later because I hate tarnishing my code with CC's. If you don't include this bit IE8 and Opera both fail to drag the footer back down if you drag the window up and down by grabing the bottom of the window - FYI not the corner. Note: without the extra code, they do both draw the footer correctly on initial page load. So if you don't care about the rare user that drags their window around you can safely exclude the extra code.
I killed margin/padding in both demos via *. You account for them any way you see fit.
*{margin:0;padding:0;}
Method 1: footer INSIDE wrapper
CSS
html, body {
height:100%;
}
#wrap {
position:relative;
min-height:100%;
width:1000px;
margin:0 auto;
background:#ccc;
}
#wrap:after {
content:'';
height:200px;
display:block;
}
#foot {
position:absolute;
bottom:0;
height:200px;
width:1000px;
background:#999;
}
body:before,#wrap:before{content:'';float:left;height:100%;margin-top:-999em;} /* IE8/Opera ruin my pretty code - this is only fix I have found "yet" - body opera, wrap IE8 */
HTML
<div id="wrap"> <div id="foot"></div> </div>
Method 2: footer OUSTIDE wrapper
CSS
html, body {
height:100%;
}
#wrap {
min-height:100%;
width:1000px;
margin:0 auto;
background:#ccc;
}
#wrap:after {
content:'';
height:200px;
display:block;
}
#foot {
margin:-200px auto 0;
height:200px;
width:1000px;
background:#999 url(images/shoe.jpg);
}
body:before,#wrap:before{content:'';float:left;height:100%;margin-top:-999em;} /* IE8/Opera ruin my pretty code - this is only fix I have found "yet" - body opera, wrap IE8 */
HTML
<div id="wrap"></div> <div id="foot"></div>
An Added Benifit: If you add clear both also as shown below then it enables the wrapper to contain all it's floats. Exactly like adding overflow hidden would or any other float clearing mechanism.
#wrap:after {
clear:both;
}
Method 3: footer INSIDE wrapper & box-sizing
CSS
html, body {
height:100%;
}
#wrap {
width:1000px;
margin:auto;
height:100%;
display:table;
position:relative;
padding-bottom:200px;
background:#ccc;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#foot {
position:absolute;
bottom:0;
width:1000px;
height:200px;
background:#999 url(images/shoe.jpg);
}
HTML
<div id="wrap"> <div id="foot"></div> </div>
Method 4: footer OUSTIDE wrapper & box-sizing
CSS
html, body {
height:100%;
}
#wrap {
width:1000px;
margin:auto;
height:100%;
display:table;
padding-bottom:200px;
background:#ccc;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#foot {
width:1000px;
margin:-200px auto 0;
height:200px;
background:#999 url(images/shoe.jpg);
}
HTML
<div id="wrap"></div> <div id="foot"></div>
An Added Benifit: When you use display table as in Method 3 & 4 it enables the wrapper to contain all it's floats. Exactly like adding overflow hidden would or any other float clearing mechanism.
#wrap {
display:table;
}
There are many different sticky footers floating around the web. Lets break each one down and expose their weaknesses and/or strengths, and how they perform in various browsers, as compared to mine. Searching for "CSS Sticky Footer", lets take the top 10 on Google shall we...
1) http://www.cssstickyfooter.com - Works in all browsers. The footer is positioned outside the wrapper. It includes the fixes for IE8/Opera with an unnecessary large pixel value (-999em is better in my opinion), as Opera no longer carries with it a max value (however, every now and then a browser bug pops up regarding height limits - so just be aware). But for IE8 it uses ugly IE CC's. No simple demo to learn from - that is to say it has a demo but it is not simple. Has two unnecessary float clearing mechanisisms that muck-up the code and blur the learning experience - overflow auto and clear both - therefore if anything flows outside the container scroll bars will appear. Other than that the code is pretty clean and simple.
2) http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ - Does not inlude the fix for IE/Opera therefore does not work in all browsers. Uses min-height:100%; height:auto !important; height:100%; bit which brings about some bugs in different situations. Here is one of many threads where Paul O'B explains why. The footer is positioned outside the wrapper. The inluded demo is somewhat simple to learn from - albeit wrong.
3) http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/ - OMG! I had to make a demo from it's code it's so bad. It's sad what passes for quality content these days over at Google since it's Panda update. Let me count the ways. No demo, everything is caps, no Opera/IE8 fix therefore does not work in all browsers, no position relative on it's container for it's AP footer, height 100% on container makes the container go no further than 100% height, and etc.
4) http://code.google.com/p/cleanstickyfooter/ - FYI, whenever you see someone writing code out long hand like this "padding: 0px 0px 41px 0px;" and with px on zeros it's a strong indicator that CSS is not their passion. No simple demo to learn from, a strong case of "Divititis", does not account for Opera/IE8 therefore does not work in all browsers, and again uses the height:auto !important; bit which has problems as another thread explains.
5) http://css-tricks.com/snippets/css/sticky-footer/ - The footer is positioned outside the wrapper - not necessarily a bad thing. Does not include IE8/Opera fix therefore does not work in all browsers, no simple demo to learn from, includes unnecessary code for IE6 (as it's dead), includes two unnecessary float clearing mechanisisms that muck-up the code and blur the learning experience.
6) http://www.mindfly.com/blog/2012/08/09/the-css-sticky-footer-fix/ - The footer is positioned outside the wrapper. Does not include IE8/Opera fix therefore does not work in all browsers, no simple demo to learn from. However, aside from those does at least does have somewhat clean code - I like that.
7) http://mystrd.at/modern-clean-css-sticky-footer/ - At least it's something new - he's thinking and not just blindly copy and pasting from others. Albeit, not very practical in the real world. The footer does not show in IE8 at all, and does not include fixes for IE8/Opera therefore does not work in all browsers. However, all his commenters seem to really like it, although I don't know how since they're going to need divs.
8) http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/ - Definitely the cleanest code yet on Googles top ten but just as most others doesn't include IE8/Opera fix therefore does not work in all browsers. It includes IE6 fixes (not needed it's dead). It does inlude a somewhat simple demo to learn from. Curiously the footer was following the window down when testing the demo. However, it's because of the Google ad script somehow making IE8 keep track of it's webpage.
9) http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/ - Does not work in all browsers as there is no IE8/Opera fix, no demo, IE6 crap, and Divititis for a simple tut including unsemantic clearfooter div.
10) http://www.search-this.com/2009/10/09/css-a-sticky-subject/ - Not in the top ten but needs to be included. As expected Pauls does work in all browsers. Inludes fixes for IE6/8 via IE CC's with height 100% and display table. Includes Opera fix. As a side note he uses a pixel value here (FYI -32767px) because that exact amount used to be Opera's limit. When using this technique, Opera no longer caries that limit - you can go as high as "-99999999999px" if wanted to. However, every now and then a browser bug pops up regarding height limits - so just be aware. His main example uses a somewhat different approach to pull the footer back into view via a negative top margin on the container and a equal size border on the header. He has quite a few somewhat simple demos to learn from, and a very detailed article explaining the why's and how's. Also, he has a nice auto height footer here.
