How to Stick a Footer to the Bottom with CSS

+++++++++++++++++++++++++++++++++++++++++++++++++++++
PLEASE NOTE: This technique has been updated & streamlined for HTML5.
Click here for the updated post
+++++++++++++++++++++++++++++++++++++++++++++++++++++

CSS footer problem

Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.

The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.

 

Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.

Simples:)

I’ve created a starting template for all sites I create. You can download it here.

It contains a html file & css starting point. I’ve also added a header along with the footer & content divs. Its 800px wide and centred. its fairly simple to figure out & modify. Have a look.

20 thoughts on “How to Stick a Footer to the Bottom with CSS

  1. Hello Conor,

    This was really useful to me, thanks a lot. I am pretty good at css making a footer stick down the bottom with no weird gap between footer and content was my final hurdle. This template is the bees knees, thanks from Josh

  2. I’ve downloaded the sample-tested this in Firefox and there is vertical scroll ….:(

  3. The vertical scroll is caused by the default margin around

    tags in Web Kit browsers like Firefox, Opera & Chrome. Just remove the 3 paragraphs in the html file to remove vertical scrolling. Or alternatively add p{margin:0} to the CSS.

  4. Hi there, I found out another way to stick footer to the bottom of the page: something like this:
    footer{
    position: absolute;
    bottom: 0px;
    right;0px;
    left: 0px;
    }
    Correct me if I am wrong.

  5. Yes the footer will stick to the bottom but problems arise if the content is greater than the browser window. As the footer is positioned absolutely at the bottom of the browser it will not be pushed down as the content grows. See an example here

    http://conordarcy.com/footer-error/

    See what happens when you scroll down.

  6. My problem is that when the window minimizes, the footer comes up to block the content. How can I keep it so that the footer stays on the bottom, but also UNDER the body/content div?

  7. The vertical scroll is caused by the default margin around <p> tags in Web Kit browsers like Firefox, Opera & Chrome. Just remove the 3 paragraphs in the html file to remove vertical scrolling. Or alternatively add p{margin:0} to the CSS.;…

  8. Indierobot :

    My problem is that when the window minimizes, the footer comes up to block the content. How can I keep it so that the footer stays on the bottom, but also UNDER the body/content div?

    Hi Inderobot, can you put your code online so I can have a look.

  9. If the content height exceeded the browsers height a white space appears between the content and the footer. The space is as tall as the footer/content padding. Thats the only problem I saw in this template. Other than that, this template was great, simple and functioning.

  10. To fix this you can remove the line ‘padding-bottom: 100px;’ from either ‘#content’ or ‘#content_800′ in the css file.@Pete

  11. it works fine in IE but in chrome i am still getting that whit space between content and footer, even when i remove the padding

  12. Can you take a look at the code on this page? I can’t seem to get the footer to stick to the bottom of the page. I’ve used what I believe to be your code here, but for some reason the footer still wants to ride up off of the bottom of the page. I’d appreciate any feedback you may have.

    Here is the url to the page that I’ve applied your code to:

    http://www.corvairflair.com/sarah-lamb/sarah-lamb-exhibitions.html

  13. Thanks! This helped me with an SaS application I am working on. One suggestion is to add “clear: both” to the #footer div. Reason is because if any divs within #content have a min-height pixel amount set there are issues when the browser window height shrinks. For instance, if you have a footer of 200px high and divs nested inside of #content with a pixel amount of 650px, 650px + 200px = 850px. This is problematic when the browser window height is less than 850 pixels, the footer div indexes/appears underneath the nested divs of 650px. What should happen is the browser viewport adds scroll to the page, you can accomplish this with “clear: both;” on #footer.

    Best Regards! :)

  14. Oh and P.S: When you add “clear: both” remove the padding on the bottom of #content. because on larger screens where the content height is less than the browser viewport, the footer is below the fold and you have to scroll equal to the height of the footer just to view it. Kinda odd.

  15. About what hideaky said.. ..what if you put “fixed” instead of “absolute” ..then there shouldnt be a problem with the content pushing trought it.. right?

    footer{
    position: fixed;
    bottom: 0px;
    right;0px;
    left: 0px;
    }

  16. I think i had like a meltdown.. Yea sure if you just want the footer to stay down.. fixed instead of absolute would do it.. but if you want “content” to push the footer down.. then it wont do.. because, sure the footer stays down but the content would rush right under the footer..

  17. Thanks for the “easy for even a newby to understand” tip! I was really trying to find something helpful. Cuz my coding ain’t that good (im a designer) all the tutorials elsewhere in this problem were somehow too difficult for me to put them working on my little project. So thanks a lot dude! you saved my day. ;)

  18. Your problem is position:absolute.
    Just change it to “position:fixed;” in your .footer class.

  19. it does not work in firefox and safari.It only works in IE.

  20. I’ve updated the code & it looks fine on IE8, Firefox 3 & Chrome 3.
    http://www.conordarcy.com/css-footer-solution.zip

    Let me know if you’ve any problems.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>