How to Use the Sticky Footer Code

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 to do the same task. It's been tested in over 50 browsers and seems to work great.

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.

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 makes your sticky footers to stick to the bottom.

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; 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;}

You'll notice that the footer height is used three times here. 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.

Ne Need for Clearfix Hack!

Many CSS designers will be familiar with the Clearfix Hack. It solved a lot of problems with floating elements. 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.

If you prefer to use the Ryan Fait method with the extra push <div> may still need to apply the overflow statemtn if you are using a floating multi-column layout.

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).

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%;}