How to Use the Sticky Footer HTML & CSS 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. 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. 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" class="clearfix">

	</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" class="clearfix">

		<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" class="clearfix">

	</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 {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.

But we are not done just yet. We need to add the clearfix properties to the main <div>.

Clearfix Hack to the Rescue

Many CSS designers will be familiar with the Clearfix Hack. It solves a lot of problems with floating elements. We use it here to get the footer to stick in Google 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.

So we add this to our stylesheet as well;

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

If you prefer to use the Ryan Fait method with the extra push <div> you’ll still need to apply a clearfix 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.