FortySeven Media

Jonathan Longnecker

Jonathan Longnecker

January 14, 2008

Making Your Footer Stay Put With CSS

One problem I run into pretty frequently when coding a site in to XHTML and CSS is making my footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window. I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at the bottom of the screen no matter how tall the window is. So if I have a page with a lot of content that footer shouldn’t show up until the content is done. How do we fix this? Let me show you. Here’s what the problem looks like:

Footer is broken

This tutorial assumes a few things: 1. That you know basic HTML formatting, and 2. That you have a pretty good understanding of CSS.

So first we need to make sure that everything except the footer is inside a container div. So your code would look something like this:

<div id="container">
    <div id="header">Header</div>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
      </div>
<div id="content">Content Here.</div>
</div><!—End Container—>
<div id="footer">Footer Here.</div>

Now that you’ve got your basic HTML set up, let’s head over to the CSS and see what we need to do there to get it to work. First, we want to give the html and body tags a height of 100%:

html, body {
height: 100%;
}

Next, we need to set the container div to position:relative, min-height: 100% and negative margin the bottom the height of the footer. What? A fixed height footer you say? Yes, I haven’t quite figured out the best way to do it otherwise:

#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}

Now, onto the footer. Make sure the height on the footer matches the height of the negative margin on the container and set the position to relative:

#footer {
height: 330px;
position: relative;
}

What’s that? Yes, I know it doesn’t work yet. There’s still a bit of magic to be done. See it turns out we need a div to help separate the footer from the container. We’re going to call it clearfooter. So jump back to your HTML and add the div class right inside the closing div of the container. That’s very important. Inside the closing div:

<div id="container">
    <div id="header">Header</div>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
      </div>
<div id="content">Content Here.</div>
  <div class="clearfooter"></div>
</div><!—End Container—>
<div id="footer">Footer Here.</div>

Head back over to your CSS file and add this to the clearfooter div. Notice the height again:

.clearfooter {
height: 330px;
clear: both;
}

Alright! So for those of us using browsers that aren’t stupid, this should work great. But 80% of use that one browser that is stupid, our friend Internet Explorer 6. Thankfully, it’s a pretty simple fix. I know, how often does that happen? First of all, you should know that IE7 should work fine with what we’ve done up to this point. So all we need is an IE6 specific “hack.” In your header where you’re calling your external stylesheet put this:

<!—[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>

This is a conditional statement for IE6 so it will load the CSS file only in that browser. In the CSS file, all you have to put is:

#container {
height: 100%;
}

So there you have it! This works in IE 6 and 7, Firefox and Safari 2 and 3. I hope you’ve found this a useful tool in your CSS arsenal. If you know a better way, please let us know in the comments!

Footer fixed

Update: Sorry guys, we had to turn off comments. Too much spam :(

P.S. – If you want to learn how to create a more profitable web shop check out Freakishly Profitable. It's the best way to make a "monster" adjustment to your web studio's bottom line.

Share the Love

Comments

  1. Beautiful site! I don’t do design professionally: my department drafted me, sort of. I had to develop the main pages of a site that has been modified over the years, and after about six months of study I hand coded a working page: xhtml and css, with a little javascript datebox and an imported file to make the dropdowns work in IE.

    I solved the footer problem finally, but honestly I can’t recall the process in detail anymore. I put a clearfix div and the footer div within my container and it seems to work. I like your page’s appearance and its very functional footer, in any case. If you happen to see my page and want to offer any suggestions, I’m open to that. You do this for a living so I suspect you’re busy enough without helping out amateur or part-time designers. Did I mention I like your page? Thanks for the footer fix, too!

  2. Joe, thanks for the kind words. You’ve done a great job with the code on that page! Props to you for using lists to do your navigation.

    A little padding would do wonderful things for your page. The content stacks up pretty tightly against the sides of their respective divs. Since you aren’t having to cram in insane amounts of content, There is no reason not to give it a little breathing room.  grin I would start with 10 pixels and see how you like it.

    I wish my first page was built so well. Keep it up and we’ll be reading your blog for tips.  wink

  3. Great site and congratulations on making it to the front page of webcreme.com! I’ve had this similar problem in the past and never did come up with a good solution. I believe that it was due to those infamous web browsers that don’t like to follow standards. IE’m sure you already know which ones IE’m talking about. Thanks for the work around!
    - Dan

  4. Thanks, Dan! We are very excited to have made it on to webcreme.com. Yeah this is the best solution I’ve found so far. I’m still hunting for one that lets me have an expandable footer. And yes, IE’m exactly sure which browser you’re talking about grin
    Thanks again for the kind words.

  5. Hi ho cowboys,

    Helpful post - muchas gracia LOL

  6. interesting. I prefer ryan faits css sticky footer (http://ryanfait.com/sticky-footer/)
    as you don’t have to do any funny hacks for ie6,  it just plain works.

  7. Or you could just make the <html> element use the same background color as your footer…

  8. VERY NICE!  i will try in my next css website

  9. @ Stewart,  Thanks for posting Ryan’s method. It’s always good to add to our toolbox.

  10. @ Fredrik, Yeah that could work too, depending on your design. I’ll keep that in mind.

  11. very nice. why is there no style for #nav? it is set to align bottom and I know it works but it bugs me.

  12. thnx a lot. very effective…. i ike it. easy to follow…

  13. where was this 2 months ago when i needed it?! ahaha.

    great tip, thanks so much!

  14. I’ve been reading your blog for quite a while, and I like your design alot. Thank you for sharing your code. Keep up your great work!

  15. cool hmm
    Marked this one for future reference.
    Something tells me this might work better than what I’ve been using.
    .tGone

  16. This is the miraculous solution to deadly disease. I have been trying to work around that for HOURS AND HOURS and after try yous aproach I a couple of minutes my template was looking neat. thanks to you. Hope you won the lottery or something. smile

  17. Brilliant article, always struggle with this one!

  18. Seriously this is Perfect Great Job

  19. Still, You can use _height: 100%; in container instead of creating wacky hacks. Works for me. Regards

  20. @ Mark, interesting, but it doesn’t validate. That’s the reason for the conditional stylesheet. But hey, we’re trying to fix IE6 right? They’re all wacky hacks. wink

  21. confused well this solution would work for regular web page layout ..can anyone suggest about footer layout in print view as my application user is concerned with print view…any help would be appreciated

  22. Ok, so this works (always a good thing!), but I’m getting a vertical scroll-bar no matter the size of the page… Any tips on removing it?

    Thanks!

    Kevin

  23. Thank you for the solution and explanation. Each time I have to do a sticky footer there’s a new problem around. Have somebody tested this solution with a page with JS based accordions or slide-downs? In IE6 the footer stays in place and doesn’t move when the slide-down is opened.

  24. @Kevin: It’s a good idea to force the space for the scroll bars anyway, so that on shorter pages the design doesn’t jump around if it is a centered layout.
    You can do this by using:
    html {
          overflow-y: scroll;
    }

    This works in most browsers or yes for those that don’t support it you will need to use a height declaration of html {height:100.01%} but in doing that you always get a scroll-bar no matter what. With the overflow-y: scroll; method all you get is the space of the scroll bar appearing instead of a constant scroll bar which I personally think looks a bit better.

  25. @ Victoria, We have a jquery slidedown at the bottom of each portfolio entry on this site and it sees to work fine. Maybe try that one and see if it works with your site?

  26. More Comments:    1 2 3 >  Last ›

Leave Your Thoughts Behind

Commenting is not available in this channel entry.