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 responses to “Forcing the footer to always be at the bottom of a page”

  1. Godfrey Bartlett Avatar

    Here’s an example that works in all browsers.
    Except IE7 beta 2/3

    Can anyone help me adapt this for the the new IE7 or suggest a workaround?

  2. Mukesh Yadav Avatar
    Mukesh Yadav

    This working is fine in IE but not in Firefox

  3. Chris Avatar

    Didn’t work for me.

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

  4. Kenny Bones Avatar
    Kenny Bones

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

    .footer {
    height: 37px;
    clear: both;
    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.

  5. mickael Avatar

    .footer {
    height: 37px;
    clear: both;
    position: fixed
    doesn’t work in IE6 🙁

  6. xmat Avatar

    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 ?

  7. dfesh Avatar

    this code does nto work in IE7

  8. MJ Avatar

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

  9. UltimateZ Avatar

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

  10. Avatar


    .footer {
    height: 37px;
    clear: both;
    position: fixed

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

    position: absolute;


  11. UltimateZ Avatar

    Thank you. I now have my footer always at the bottom. Episodes.php

  12. joe Avatar

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

  13. uhhhh Avatar

    Ummm ok, like, this totally does NOT work in IE 12!

Leave a Reply

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