cleanstickyfooter - The cleanest way to a sticky footer with CSS.

Project Information

Activity Medium
Project feeds
Code license
GNU GPL v3
Labels
cleanstickyfooter, stickyfooter, cssstickyfooter, cssfooter, htmlstickyfooter, htmlcssstickyfooter

Members

trev.sheridan

Featured

Downloads

Links

External links
Trevor Sheridan's Website

Browser Compatibility Update

(03/30/2010)

This technique has been verified in ALL modern browsers. If you are experiencing any issues with this technique in IE8 (or any other browsers), please read this: http://code.google.com/p/cleanstickyfooter/issues/detail?id=2

Overview

(project updated 08/12/2009)

Over the past couple of months I have run across a few "sticky footer" techniques. While these techniques are okay, I felt that they were a little to invasive with their hacks, such as using the "clear fix" hack.

About a year ago I had to conquer the "sticky footer" problem on a project I was working on. Ever since then I have been refining my technique, and feel that now it's a perfect time to release what I like to call the "cleanStickyFooter".

There is only one hack, which is a height targeting hack for Internet Explorer 6 and older browsers like it.

The HTML

Lets start off by building out the basic HTML needed for this technique.

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
  <head> 
    <title>cleanStickyFooter</title> 
    <link rel="stylesheet" type="text/css" href="cleanstickyfooter.css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" charset="utf-8" /> 
  </head> 
  <body> 
    <div id="wrapper"> 
      <div id="content_wrapper"> 
        <div id="content_inner_wrapper"> 
          <div>Site content will be contained here.</div> 
        </div> 
      </div> 
    </div> 
    <div id="footer_wrapper"> 
      <div id="footer_inner_wrapper"> 
        <div>The footer's content</div> 
      </div> 
    </div> 
  </body> 
</html>

Looking at the HTML below, you see a div with the id of "content_inner_wrapper", the inner wrapper is only used if you have a site where you have a centered content area. In our case we do, so we add this div in. Same rules apply for the "footer_inner_wrapper" inside of "footer_wrapper".

 
<div id="content_inner_wrapper"> 
  <div>Site content will be contained here.</div> 
</div>

The CSS

I am going to start off by showing all of the required CSS to make this work (except the last two lines), then break it down line by line.

 
html, body {
       height: 100%;
 }
 
body {
       margin: 0px;
       padding: 0px;
 }
 
div#wrapper {
       width: 100%;
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0px 0px -41px 0px;
 }
 
div#footer_wrapper {
       width: 100%;
       height: 41px;
 }
 
div#content_wrapper {
       width: 100%;
       padding: 0px 0px 41px 0px;
 }
 
div#footer_wrapper, div#content_wrapper {
       min-width: 942px;
 }
 
div#footer_inner_wrapper, div#content_inner_wrapper {
       width: 942px;
       margin: 0px auto;
 }

Required

First starting off with the "html, body" selector, we are going to set not only the body but the html tag to a height of 100%, without the html tag at a height of 100% this wont work.

 
html, body {
       height: 100%;
 }

Next if not already done so, want to clear the default margin the browser applies.

 
body {
       margin: 0px;
       padding: 0px;
 }

The next block is the most crucial. In this block we are going to do the following:

1. Set the width of the wrapper to 100% (not required but semantically makes sense because the footer is at the same level and is at a width of 100%, also useful if you want a header that is a width of 100%, you would contain the header inside of div#wrapper).

2. Give the wrapper a min-height of 100% (min-height doesn't work well in IE6 and older browsers like it, so we are going to set the height to "auto" and make sure it has the "!important" flag so our new browsers don't pick up on the next line).

3. In the next like we are simply using height: 100%, it will act as min height in the older browsers (older browsers allow expanding heights).

4. Then we are going to set a bottom margin to the negative version of the height of the footer. In our case the footer is 41px high, so our bottom margin is -41px.

 
div#wrapper {
       width: 100%;
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0px 0px -41px 0px;
 }

The footer wrapper we will simply asign a height, the above block pushes everything down for us. We will also push this div out to a width of 100%.

 
div#footer_wrapper {
       width: 100%;
       height: 41px;
 }

The main deal with the next block is we need to set a bottom padding of 41px to counteract the -41px margin we set above. We are also setting a width of 100%.

 
div#content_wrapper {
       width: 100%;
       padding: 0px 0px 41px 0px;
 }

Required in certain cases

Use the next two below if you have all of your content in a centered containing div, in our case the div is 942px wide. If not, disregard the following two blocks.

Use the block below when the content is scrolled horizontally, we will want to set a min-width on the footer_wrapper and the content_wrapper. The min-width should be the width of the container (see the next block below). Without this there will be a gap of empty space on the right side. Min-width will work in older versions of IE if you have a width set above, in our case we have a width of 100% set.

To see what I'm talking about here, simply remove the min-width, and refresh your page. Make sure you scroll in enough where you see the horizontal scroll bar. Then scroll to the right, you will see an empty area. Now put that min-width back in there :)

 
div#footer_wrapper, div#content_wrapper {
       min-width: 942px;
 }

Lastly we are going to set the width of our container for the content. We are also going to center the container by using the common margin: 0px auto.

 
div#footer_inner_wrapper, div#content_inner_wrapper {
       width: 942px;
       margin: 0px auto;
 }

Browsers

This has been tested in Firefox (2, 3, 3.5), Internet Explorer (6, 7, 8), Safari, Opera, & Google Crome.

The Difference

Google "sticky footer", I have listed below why this technique works better than the top results from this search.

http://ryanfait.com/sticky-footer/ - This technique is similar, but cleanStickyFooter takes it much further. The technique located here doesn't play nicely when you want to make your footer have a width of 100%.

http://www.cssstickyfooter.com/ - This technique is one out of many I am referring to when I say its invasive with CSS clearing hacks.

I think I will stop there, do some research yourself (if you haven't already done so) and you will see most techniques use z-indexes and clearing hacks, when they really aren't necessary.