Anyone that works with HTML and CSS will tell you that positioning things exactly where you want them to be is often times difficult. If you want to position something somewhere vertically, it becomes even worse.

I just finished working on a theme where I needed to force the footer of the layout to the very bottom of the page. While logically putting the footer after all the other content is easy, making it sit at the very bottom of the page even when the content doesn’t take up enough space to push it down there is quite difficult.

After struggling with getting this right for a couple of hours, I finally found a site that has done all the hard work for me. CSS Sticky Footer is the site that saved my sanity.

CSS Sticky Footer provides a solution that sticks the footer to the bottom of the page in a cross-browser compliant manner. The site reports, and I can confirm, that it works with Internet Explorer 6 through Internet Explorer 8,  Firefox, Google Chrome, Safari, Opera, and Konqueror.

Since the implementation could change, I recommend that you visit the site to get details; however, just in case something happens to the site, I’m going to add the solution here as well.

HTML

<div id="wrap">
    <div id="main" class="clearfix">
        <!-- non-footer content -->
    </div>
</div>

<div id="footer">
    <!-- footer content -->
</div>

CSS

/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components
use padding, not vertical margins (top and bottom) to add spacing, else
those margins get added to total height and your footer gets pushed down
a bit more, creating vertical scroll bars in the browser */

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

/* CLEAR FIX */
.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 */

Sample

I have a sample page available to see this in action.

Many thanks to Steve Hatcher who made my job a lot easier.

Update

Someone reported that they have a roughly 45 pixel white gap at the bottom of footer of the sample and that they saw this on Firefox 3.5.3 on Vista. I’ve tested this on the exact same OS and browser, and I don’t see it. I’ve tested this on a huge variety of platforms, browsers, and browser versions, and I can’t see the gap. Does anyone else see any odd rendering?

Did I help you?