Forcing the footer to always be at the bottom of a page

Cameron Adams (The Man in Blue) has created a method to force a footer to stick to the bottom of a page, regardless of how much content it contains. His approach is based on the work by Craig Erskine (solarDreamStudios).

The Setup

You have a page that terminates in a sturdy footer, such as this site. You’d like the footer to be cemented to the bottom of the browser window regardless of the amount of content. How do you position the footer at the bottom on a small page, yet not cause a conflict with long page? It’s actually more irksome than you would imagine.

The Solution

The footer is placed outside the content wrapping div. The html, body, and content div are given height:100%, which pushes the footer off screen. The footer then uses negative margins to sneak back up into the page. For pages with longer content, space is needed in the content div to avoid overlapping on the bottom.

Based off the original footerStick, footerStickAlt sets up the Web page so that it will span the entire height of the browser window, even if the content is less than the height of the browser window. However, where footerStick then used absolute “bottom” positioning to get the footer to appear at the bottom of the screen/content, footerStickAlt positions the footer outside the height of the content, and then applies a negative margin to get it to display inside the browser window.

So, where footerStick’s code requires you to place the footer inside a containing element, footerStickAlt requires you to place it outside the element:





You then need to apply a bit of CSS:


html { height: 100%;}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }

…For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content.

The only drawback to footerStickAlt is that you must know the exact height of your footer (whether it be in absolute or relative pixels). However, you have to know this roughly with the original version anyway, in order to make room for the footer at the bottom of the content. It’s generally a non-issue with footers anyway, as they have limited information and a sparse layout.

Cameron Adams – footerStickAlt

14 thoughts on “Forcing the footer to always be at the bottom of a page”

  1. Didn’t work for me.

    My footer actually ended up half-way up the page obscuring the content

  2. The only thing I did was give the footer a class like this:

    .footer {
    height: 37px;
    clear: both;
    bottom:0px;
    width:100%;
    position: fixed
    {

    And everything works fine in both IE7 and Firefox. Not sure if all of these are necessary but it does work perfectly. Although I do get an error message in Dreamweaver when using “fixed” that it isn’t supported and whatnot. But it does work and I don’t see any problems with it really.

  3. GREAT !
    This a very elegant solution compared to what i’ve found on the internet and mickael is right it doesn’t work in IE 6.
    Any solution for IE 6 ?

  4. This didn’t work for me either! the fixed, just fixed the footer to my screen and not my page

  5. Can some one help me make a footer that always stays at the bottom. I cant get one at all to work. I make a Bottome include file and ive tried many different types. I know one that works with firefox but I cant get one that works with both. Please help if some obne can figure it out. this my website. http://www.movielegendz.110mb.com if you notice, open up my website with internet exploror and you will see the footer move to the middle of the page like its an error. But if you open with firefox it will be fine. I wanna try to get one that works with both. Please help

  6. Hi,

    .footer {
    height: 37px;
    clear: both;
    bottom:0px;
    width:100%;
    position: fixed
    }

    change position from fixed to absolute and see it works well in IE 6 too..

    position: absolute;

    Regards
    Gokul

  7. Just like all the others, when you starting positing using inside nonFooter DIV the whole
    thing breaks.

Leave a Reply

Your email address will not be published. Required fields are marked *