Dave Woods - Freelance Web Design Warwickshire

CSS Fixed Footer

Sometimes it’s the simple things that can be the most infuriating when it comes to dealing with CSS. Positioning a footer to stay at the bottom of the browser window unless the content is larger, sounds like it should be fairly simple, but is in fact quite an advanced technique when it comes to CSS.

However, the following tutorial will explain in a few simple steps, how this can be achieved very easily.

First up, here’s a demonstration of the kind of thing you’ll be able to achieve with this technique:

HTML

I’m going to start off with the code that I used within the 100% Height Layout Using CSS tutorial as this provides the foundations we need for this page.

The only extra bit of code that I’ve added to the previous tutorial is the clearfooter div and the footer div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>CSS Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
<div id="clearfooter"></div>
</div>
<div id="footer">
<p>&copy; Dave Woods</p>
</div>
</body>
</html>

CSS

Again, I’ll be using the same CSS as that used within the 100% height tutorial as a starting point. If you’re unsure of what the following block of CSS is doing, please refer to that tutorial.

* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}
* html #container {
height: 100%;
}

Ok, so now you want to know how to place the footer underneath the content don’t you. Well here it is…

#footer {
width: 680px;
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin: -50px auto 0 auto;
}

Most of this is pretty straight forward. The width, background color, text color, text align, height and padding-top are all used just to style the footer but the really clever part comes with the use of margins.

Without the margin, the footer will always appear after the content and will therefore cause 50px worth of scroll (40px height + 10px padding) and will always appear outside the view port due to the use of 100% height. However, we know the height of the footer so this can be corrected by pulling the footer back in to view by using a negative margin that is equal to the height of the footer.

We could leave this as it is, but you’ll also notice that currently if the browser window is reduced to a smaller size than the content that the content will go underneath the footer.

To correct this problem we can apply the following style to the clearfooter div to ensure that there’s always enough height at the end of the content to cater for the height of the footer.

#clearfooter {
height: 50px;
}

We could apply this style to an existing element or simply apply an ID to an existing element and use padding or margin on the bottom of that element to create the space but where that’s not a possibility then using an extra div is the most suitable solution.

As always, please feel free to comment or ask any questions about using this technique using the comments section below.

50 comments on “CSS Fixed Footer”

  1. Vincent

    Interesting article. Seems like the right and also an easy way to organize the footer with CSS.

    Furthermore, I immediately think back at my background problem (stretching both vertically as horizontally 100%). Looks like their should be a way to achieve this with negative margins. As the size of the scrolling area is equal to my heading divisions.

  3. Pingback: 10secondtourism | » Blog Archive » css smart footercode and design for websites

  5. Thryn

    I agree, this is the best solution to this problem that I’ve seen so far. I was wondering if you have any insight into a problem I haven’t been able to solve involving footers, with any of the various css solutions I’ve tried.

    The footer positioning works perfectly, and container stretches to 100%. But if the layout requires me to have a div within container, that I also need to stretch to 100% height it doesn’t stretch, even if all of the elements it’s contained within have a height of 100%. Do you have any ideas about why it may not work as expected? Thanks for your great work!

  6. Ville

    I tried this one, but I there is a problem, if you want to have some text content available in the footer (links, mailto etc) they will not be active because the #clearfooter overlaps the footer.

    It can be solved by using /height: auto;/ in #container

  7. Pingback: » CSS Tutorials — cne _LOG Archiv

  8. john

    I have a simple navigation table at the foot of all my pages,(except the front page)which I have to change every time, on every page.

    How do I include this table in an external style sheet to be the footer for every page?

    I am new to CSS styles so sorry if this sounds a stupid question.

  9. Dave Post author

    Hi John,

    CSS is only for presentation so you’ll need to use another method for what you’re describing.

    I’d recommend using SSI (Service Side Includes)

    http://en.wikipedia.org/wiki/Server_Side_Includes

    You’ll need to ensure your server is capable of this and save your page with a server side extension (I usually use .php but .asp, .shtml should work just as well).

    Hope that helps?

  10. George

    Hi Dave,

    Thanks for your site! I’m in the process of converting my 10 year old site so I’m learning all the new CSS stuff and getting away from the table layouts. The “100% Height Layout Using CSS” worked great. I tried to use this tutorial – the fixed footer. It works with a text footer, but when I tried to put a background graphic as part of the footer div, it doesn’t work. Is there a solution to this? Thanks.

    George

  11. Richard Hall

    I was trying to replicate this page with a 5% footer. But when I reduce the height of the viewport the footer no longer sits at the bottom of the viewport.

    All I changed was

    #footer {
    width: 680px;
    clear: both;
    height: 5%;
    background-color: #000;
    color: #DDD;
    text-align:center;
    margin: -5% auto 0 auto;
    position: relative;
    /* padding-top: 1%; */
    }

    #clearfooter {
    display: block;
    height: 5%;
    }

  13. Pingback: the vitamin k blog » Blog Archive » css smart footer

  17. Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

  19. Paul

    I got a problem with compatibile on IE 6 … looks like clearfooter makes width and margin does not apply or something footer is lower then supposed to be against the content.

    maybe is not a big deal in your case (example) but i am trying to apply this to 200 width footer ….

    BTW great article … bookmarked!

    does anyone have a solution to sort this out?

  20. Paul

    I guess its becasue IE 6 might not accept “minus” values on footer margin or something like that…

    for me ‘compatibility and usability’ is top prior.. and I really need to make it working for this browser … ;/

    if anyone could help … ?

  21. Greg

    Thanks to a kind member of the WebDeveloper.com forum, a solution was posted for my problem. All is well again in my twisted little world!

  22. Lucy

    I have been trying hard to replicate this with a webpage I am trying to build but I cant get anywhere with it!

    Could you perhaps explain it a little more, or in a different way please?

    Thanks,
    Lucy

  24. Lucy

    Ive looked at that but I cant belnd your code into the webpage which I have already created. Any ideas how I can?

    Thanks,
    Lucy

  27. Dean

    I’m currently reworking a website, and I’m using this solution which works great on most pages – however, one page I have created has left the footer in a dates field. I’m not sure where I’ve gone wrong.

    HTML


    title

    body {
    background: url(../images/backgroundbio.gif) no-repeat center 330px
    }
    #bio-dates, #bio-dates2, #bio-dates3, #bio-award-dates, #bio-award-dates2, #bio-exhibit-dates, #bio-exhibit-dates2, #bio-exhibit-dates3, #bio-exhibit-dates4, #bio-exhibit-dates5, #bio-exhibit-dates6, #bio-exhibit-dates7, #bio-exhibit-dates8 {
    float:left;
    line-height: 1.1em;
    margin-left: 2em;
    font-family: “Orator Std”, “Courier New”, Arial;
    color: #666;
    }
    #bio-info, #bio-info2, #bio-info3, #bio-award-info, #bio-award-info2, #bio-exhibit-info, #bio-exhibit-info2, #bio-exhibit-info3, #bio-exhibit-info4, #bio-exhibit-info5, #bio-exhibit-info6, #bio-exhibit-info7, #bio-exhibit-info8 {
    float:right;
    text-align:left;
    width:45em;
    line-height: 1.1em;
    font-family: “Orator Std”, “Courier New”, Arial;
    color: #666;
    }
    .bottom {
    padding-bottom: 3em;
    }


    Laura Jayne Strand
    Biography
    text
    Education
    dates

    info

    dates

    info

    dates

    info

    Awards
    dates

    info

    dates

    info

    Exhibitions
    dates

    info

    dates

    info

    dates

    info

    dates

    info

    dates

    info

    dates

    info

    dates

    info

    dates

    info

    © 2009 myname

    CSS
    ===

    #container {
    min-height: 100%;
    width: 780px;
    margin: 0 auto;
    }
    * {
    padding: 0;
    margin: 0;
    }
    body {
    font-family: “Orator Std”, “Courier New”, Arial;
    font-size: 0.9em;
    color: 666666;
    }
    html, body {
    height: 100%;
    }
    * html #container {
    height: 100%;
    }
    p {
    padding-top: 0;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    color: #666666;
    font-size: 1em;
    }
    #clear {
    clear: both;
    }

    .text {
    font-family: “Orator Std”, “Courier New”, Arial;
    text-align: justify;
    margin-right: 1em;
    margin-left: 1em;
    line-height: 1.1em;
    color: #666666;
    }
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    li ul {
    display: none;
    position: static;
    }

    li:hover ul, li.over ul{ display: block; }

    h1 {
    font-size: 4.5em;
    font-family: “Orator Std”, “Courier New”, Arial;
    text-align: center;
    padding-top: 0.5em;
    padding-right: 0em;
    padding-bottom: 0.7em;
    padding-left: 0px;
    font-weight: normal;
    font-variant: small-caps;
    color: #666666;
    }
    h2 {
    font-size: 2.5em;
    color: #666;
    font-family: “Orator Std”, “Courier New”, Arial;
    font-weight: normal;
    text-align: center;
    padding-bottom: 1em;
    font-variant: small-caps;
    }

    h3 {
    font-family: “Orator Std”, “Courier New”, Arial;
    font-size: 1.5em;
    font-weight: normal;
    font-variant: small-caps;
    text-align: center;
    color: #666666;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    }
    #footer {
    width: 780px;
    color: #CCC;
    text-align: right;
    height: 30px;
    padding-top: 10px;
    margin: -50px auto 0 auto;
    font-size: 0.8em;
    }

    ===========

    any ideas?

  28. Dean

    ugh, that didn’t come out great!

    where it says dates or info, its just an editable region.

    Theres a div id=”clear” below each date/info field

  29. Dean

    ahhh, please ignore. I fixed the problem by simply making the container 120% for the individual page causing the problem. I’m not sure if that is the best solution or not, so if you would have done something differently then I’m all ears!

  30. Winter

    За статью спасибо вам огромное, все по делу, достаточно много кто это применяет на практике

  31. Tinker

    This fails, as they all fail, if the container has two columns, one floating left, the other floating right. Any time the right column exceeds the height of the lewt column, the footer does not re-position at the bottom, but over-writes the column.

    There is no simple way to do this, Dave, but this is a very nice try…

  32. Pingback: CSS | Tutorials, Techniques, Hacks, & Resources - MLC#4 | The Blog of Joren Rapini

  34. Lasse Beckman

    And for you out there use ASP.NET with the extra tag. Change this to make this code work in all browsers.

    Code in this exampel:
    html, body {
    height: 100%;
    }

    Change to this:
    html, body, form {
    height: 100%;
    }

    That’s all.

  37. Elmer Jimenez

    Is there any way to try this technique (which by the way works wonderfully), but also using a banner div? In other words, have a banner DIV that behaves much like the footer and still have the middle content div, also stretching 100% height-wise?

  38. Dave Woods Post author

    @Elmer, yeah that should be possible, think I’ll need to write another article for that though 🙂

  39. Kartik Iyer

    Thanks for this nice article Dave. I really loved the way you simply presented it. I’m currently developing a website at my personal level. I was really confused on how to make my footer go down the ladder. Your article really helped. Thanks a lot again. Cheers! 🙂

  40. Liselotte

    I changed the position:relative to position:absolute in the container div. It works for me now in all browsers

  41. Pingback: CSS Tips Every Web Developer Should Know!

  43. Mark

    Great work. Referred back to this post several times since I bookmarked it about 2 years ago… Just wanted to say thanks 🙂

  50. Moutushi

    Thanks a bunch Dave… am creating a website & had been trying to stick the footer to the bottom since the past couple of days… your technique worked finally. I just had to remove the position attribute from the footer style.

    warm regards,
    cheers