How to Use the Sticky Footer Code
Be sure to read the Known Issues at the bottom of this page. It will help prevent a lot of mistakes that can take hours to debug.
Introduction
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
Ryan Fait's solution is well known, and it works, but it requires an extra <div> with no content in it to provide an extra "push". Some HTML purists may find this a blasphemous use of non-semantic code. Our solution avoids the extra <div>.
The Sticky Footer solution presented here is based upon the information found in the Exploring Footers article from A List Apart as well as expands upon the work of Cameron Adams and this piece at lwis.net.
In an early version it applied 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. Instead, after some feedback, this updated version simply uses overflow:auto, suggested by Joel Pittet, to do the same task. Paul O'Brian suggested the addition of display:table for IE 8, as well his sticky footer article here got a nice suggestion for a fix in Opera which we used here as well. It's been tested in over 50 browsers and seems to work great.
The HTML Code
Below is the basic structure of the HTML code. You'll notice how the footer <div> sits outside of the wrap <div>.
<div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div>
You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;
<div id="wrap"> <div id="main"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap"> <div id="header"> </div> <div id="main"> </div> </div> <div id="footer"> </div>
If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.
The CSS Code
Below is the CSS code that makes your sticky footers actually stick to the bottom.
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
And on your html page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others);
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
You'll notice that the footer height is used three times. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.
The conditional statement is neccessary to allow IE8 to expand beyond the 100% height should the content be longer. The other hack is for browsers that dont understand min-height, in particular Opera. It uses a 100% height float to resize pages properly when adjusting the viewport (browser window) size. The -32767px margin is Opera's limit.
No Need for Clearfix Hack!
Many CSS designers will be familiar with the Clearfix Hack. It solved a lot of problems with floating elements. A previous version of this Sticky Footer solution used it. Instead, a more modern and easier to code solution is the overflow statement. We apply it to the main <div> to help get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.
Known Issues
Heights and Margins
Using top and bottom margins inside some elements may push your footer down by that margin height, perhaps in a header or the wrap or main <div>'s themselves. Instead use padding to create spacing inside the element. You'll notice this is happening if your page has little content so that the footer should be on the bottom but you see that your window scroll bar on the side indicates that it is sitting a bit below the window bottom. Go find the offending top or bottom margin and switch it to padding.
Be carefull with declaring padding on the main <div> in another part of your style sheet. If you were to add something like this; padding:0 10px 0 10px; you would end up overwriting the important bottom padding that is supposed to be the same as your footer height. This would cause your footer to start overlaping your content on your longer pages (in Google Chrome).
Watch out if you are using a border on your footer. If you add a 1px border to a 200px high footer, then you need to use 201px as your negative margin in in #footer and 201px as your padding bottom in #main to compensate for that extra 1pixel.
Font Sizes
When setting font sizes in your style sheet, if you use relative sizing be aware that some viewers may have their monitor settings create bigger font sizes. In some elements, like in the footer itself, it could break the height settings and create a gap below the footer if there is not enough room left for the text to expand lower. So try using absolute sizing by using px instead of pt or em. Or simply leave plenty of room for text in your footer to expand.
.NET Platforms
When coding sites for ASP.net where each page is inside a <form> tag, be sure to add the form tag to the height:100% statement, else it will break the sticky footer. Like this;
html, body, form, #wrap {height: 100%;}
Some sample sites using the sticky footer code
Obviously this very site you are on is using the code, but there are a few others out in the wild. This West Hartford, CT landscaper uses it. You'll notice the home page uses an extra feature bar between the header and content area. Adding extras like that is no problem as long as they reside within the wrap <div>. My own local SEO service website does the same thing. Another site using it in a Wordpress theme is this recipe blog. HTML 5 and responsive web design can use the code as seen with this house painter in Kelowna, BC and these plumbers in Middletown, CT.
Sidebars on some of those pages are a little long so the sticky footer code may be redundant, but the odd page may make use of it. It's now a standard practice when I build sites now, if they need it or not. If pages are short enough the sticky footer goes to the bottom, as it should, on smartphone browsers too.
