How to: Anchor the Footer to Bottom of Page (or Header to Top)!

May
29

37 Comments - LEAVE A COMMENT

Yesterday I discussed another method of creating a full width header and footer while still keeping your interior content centered. I’m going to expand on this method, and show you how to take the full width footer you’ve created and anchor it to the bottom of the browser window so the page’s content scrolls underneath it.

At some point I’m sure you’ve encountered this technique along your web travels. Some call it a static footer, others fixed position, others a “sticky footer“. Whatever you call it, it remains anchored to the very bottom of the page, no matter how much you scroll.

With the recommendation from Microsoft for people to stop using Internet Explorer 6, plenty of heavy hitting popular sites have dropped IE6 support (Gmail, Youtube, WordPress.com, etc) combined with the various campaigns for designers & developers to stop supporting IE6 – I think it’s safe to say that we can use this method without the old hacks and javascript interferences.

So, on with it already!

Anchoring the Footer to the Bottom of the Browser Using Fixed Positioning

Taking yesterday’s example for the full width footer I’ve added a snippet of code to the #footer div, and now quite simply it will stay put at the bottom of the page as the other content glides beneath it.

Check out the demo before we start.

So we will start with the same footer code:


     <div id="footer">
          <div class="wrap">
               <p>This would be your footer content!</p>
          </div>
     </div>

And CSS:


	.wrap {
		position:relative;
		margin:0 auto;
               /*replace 900px with your width*/
		width:900px;
	}

	#header, #footer {
		width:100%;
		float:left;
	}

Except, we are going to add the additional declarations to our footer to make sure it stays put:


	#footer {
		position:fixed;
		bottom:0;
		z-index:999999;
	}

And what we end up with is a modified version of yesterday’s page – this time though the footer is stuck like glue to the bottom of the browser window and our content will scroll beneath it.

Keep in mind your footer does not need to have the content centered for this to work, nor does it need to be 100% wide. You could, completely get rid of the #wrap div if you want your content to span the entire page width. You can achieve this same result with a footer of any width/height.

This simple method works in IE7 and above, Firefox, Opera and Safari. This is not a IE6 friendly method. If for some reason you need this to work in IE6 (please stop supporting it) here are a couple of methods you may find useful:

So, I bet you are now wondering how do you accomplish this with the header?

Anchoring the Header to the Top of the Site Using Fixed Positioning

Well, it is isn’t as simple as the three lines of code for the footer, but it’s quite near. The same principle applies to the header – adding the fixed positioning, and a high z-index so it will always be on top of the other page content, but you will need to know one other thing – the final height of your header. We will use this to tell the browser how high the header should be and to push the main content down beneath the header so it isn’t hidden to start with.

When we are finished our header and footer will always remain on the screen, and the content beneath it will scroll like normal. Check out the demo.

Once again, here is what our header HTML would look like:


     <div id="header">
          <div class="wrap">
               <div class="logo">
                    This is Your Logo Text!
               </div>
               <p>Other content for your header</p>
          </div>
     </div>

And your CSS would start like this:


	#header {
	      position:fixed;
	     z-index:99998;
             /*Making sure it sticks to left of window in IE7*/
              left:0;
             /*Change to reflect height of your header.
             Remember to accomadate for padding!*/
             height:100px;
	}

We just need one more thing for this to work – Adding a top margin to our main content div to push it down below the header:


	#content {
		margin-top:100px;;
		float:left;
                /*Change to reflect width of your content.
                Remember to accomadate for padding!*/
                width:900px;
	}

Simple right?

So that is how we can combine our full width header and footer that has centered content and add a footer that will always stay put! And, as a bonus we can also have our header react the same way instead – or both.

Jump to Comments

37 Responses to How to: Anchor the Footer to Bottom of Page (or Header to Top)!

  1. […] I will explain how to use this method to create a full width footer and anchor it to the bottom of the browser wind…! […]

  2. Carlos says:

    thanks again !!

    and you may know this but I discovered that this technique does not work on iPad and iPhone devices because the fixed positioning is not supported

    but a small line of jQuery that I found here (below) at least keeps the layout from breaking

    http://www.lazycoder.com/weblog/2010/05/27/quick-jquery-hack-to-fix-positionfixed-toolbars-in-iphoneipadipod-touch/

  3. Simon says:

    This is great, thanks for taking the time to post this info. How would you amend this slightly, so the content, if longer than the page, pushes the footer down and doesn’t scroll ‘behind’ the footer?

    Thanks again

  4. Simon says:

    Thanks for taking the time to post this excellent article. How would you amend the code so the footer is placed at the bottom of the page when the content is short, but otherwise is placed at the bottom of the content (and scrolls with the content – not staying anchored with the content scrolling behind it) ? Thanks!

  5. Trisha says:

    Hello! I’ve been experimenting with implementing something like this, but I keep running into a problem with the layout when someone resizes the browser to be very short. I was hoping that I could put a min height on the main content area so that when the browser is resized, the footer doesn’t move up and into the header, but that didn’t work. Any suggestions?

  6. Barry says:

    Many thanks for this – your code works well!

  7. Chad says:

    Thanks for the article. I’ve been using this technique and it works great. However, it doesn’t work very well on mobile devices. Do you know of a technique that will keep the footer stuck/fixed to the bottom of a smartphone/tablet?

  8. Chad says:

    Thanks for the article. I’ve been using this technique and it works great. However, it doesn’t work very well on mobile devices. Do you know of a technique that will keep the footer stuck/fixed to the bottom of a smartphone/tablet?

  9. Keith says:

    Thanks! This helped me a lot.

  10. Steve says:

    This is kind of a cheat. You are using color in the footer to hide the fact that the content goes through it. It would be better if the example didn’t require color to make it work.

  11. Lindsey says:

    I’m not sure what you mean. It’s by no way a cheat. The content doesn’t go “through” anything. By using the code provided you are anchoring the footer to the bottom of the browser window and the content is underneath it. As part of the layering of the page….

  12. […] being said, I’ll have to update the code for the 100% Full Width Header/Footer Anchored to Top/Bottom of Page. I will be publishing that shortly, so keep an eye […]

  13. Nate says:

    Hi, I used the css exactly as stipulated, and though last night I saw it working on ie9 and on firefox. Now somewhere else, on ie8, and chrome, the footer is not showing. Is there something extra needed, or a modification of the code for it to work on ie7, ie8, and chrome?

  14. Nate says:

    Hi, thank you for your css tips. I used it exactly as you posted, from the code on your example page as well. For some reason last night I saw it working on ie9, and firefox, but now while on ie8, and chrome, the footer is not showing. Why would this be?

  15. Nate says:

    Hi, I see what my footer issue is, I replaced the header/footer background color with a background image of about 100px height, and 5 pixels wide, and then had it repeat-x. It works for the header on ALL browsers, and for the footer on ie9, but not on other browsers now, not even firefox. Why would this be? I changed it to background color for the footer, and it is fine, but I prefer a repeated image, so I can add texture, or even something else with an image. Any idea??? Thanks!

  16. Vasu says:

    I’ve designed site in which each page having different height with fixed width(ex 900px). But, in few pages the content is too less wherein side scroll bar wont be seen. But, in other few pages scroll bar appears & the footer content(basically aligned center ) moving left & right when toggled b/w the pages having height more then the window size & pages having window height.Plz help me to fix this issue…thanks…Sri

  17. Thanks for this post. Hopefully, it’ll help in designing simple pages.

  18. Ye_Jo says:

    Tx … of around 30 tutorials/advanceds for sticky footer, nothing helped me stick my WordPress Theme Footer in it’s rightful place, until I run in to this post and found out the logical bug in my CSS.

    If there is Karma
    + 1 Karma to you :)))

    Thanks again,
    John Doe

  19. Stephen Fulwider says:

    This has a problem. You have content on the page that is being hidden by the footer. The last paragraph of the text:

    ‘You shan’t be beheaded!’ said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered about for a minute or two, looking for them, and then quietly marched off after the others.

    is not visible on your page once you scroll all the way down.

    Do you have a recommendation for the best way to deal with this?

  20. mbalama says:

    is this work with html5?

  21. mbalama says:

    is this work with html5? please help me

  22. KurtDC says:

    thanks for this!

  23. Wouter says:

    @stephen & @lindsey:

    #content {
    padding: 15px 0px 75px 0px;
    clear: both;
    }

  24. Wouter says:

    @stephen & @lindsey:

    To reveal the last paragraph, the height of the footer should be added to the padding of the content-container:

    #content {
    padding: 15px 0px 75px 0px;
    clear: both;
    }

  25. Luke Owens says:

    I am trying to use the code you provided to make my header stay put and then want to tackle the footer. I have placed the code but the header still moves. I am providing the CSS as it is in my editor.

    .sf_wrapper {
    background-color: #958606;
    background-image: url(uploads/crossbonesheader.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    border: 8px solid #000000;
    #header {
    position:fixed;
    z-index:99998;
    /*Making sure it sticks to left of window in IE7*/
    left:0;
    height:250px;
    }
    #content {
    margin-top:100px;;
    float:left;
    width:900px;
    }
    .sf_outer_wrapper {
    width: 900px;
    }
    .sf_navigation {
    width: 900px;
    }
    .sf_navigation ul li {
    text-align: center;
    width: 16.4% !important;
    }

  26. King says:

    Thanks it worked, but i still did some tweaking.

  27. Johan Basson says:

    The only problem I have with this code, is that it cuts off the bottom of the content text.
    Which mean you have to put a few break line’s after the last content.

  28. monica says:

    thanks for the help! :D

  29. Kevski says:

    Hi Lindsey

    I’m pretty new to CSS, but your example was invaluable, and was exactly what I was looking for. Thanks very much. One question (sorry, being a bit lazy here) – I have a lot of content above the fixed footer, which won’t display (depending on the size of browser window/screen/etc.), so any tips on getting a vertical scroll bar above the anchored footer?

  30. Kevski says:

    Hi Lindsey

    I’m pretty new to CSS, but your example was invaluable, and was exactly what I was looking for. Thanks very much. One question (sorry, being a bit lazy here) – I have a lot of content above the fixed footer, which won’t display (depending on the size of browser window/screen/etc.), so any tips on getting a vertical scroll bar above the anchored footer?

    (this comment may appear numerous times – sorry if it does – your site / my connex keeps timing out)

  31. Diego says:

    Great article, thanks. For those who have problems with the bottom being apparently chopped off when scrolling all the way down, you may be able to define a specific height for the footer and add a margin-bottom with the same value to the content, just as it is done on the header. Good day!

  32. John says:

    This code works great in firefox but internet explorer is a mess, can anyone help???

    /**Full Width – Anchored Header – Anchored Footer – Content**/

    /*********** Body START ************************/

    body {
    font: Tahoma;
    color: #006699;
    line-height:1;
    /**background-color: #ED2E38;**/
    margin:0;
    /**background-color: #FFFFE0;**/
    background-color: #FFFFFF;
    }

    /**We just need one more thing for this to work **/
    /**Adding a top margin to our main content div to push it down below the header:**/

    #content {
    margin-top:100px;
    margin-bottom:20px;
    clear:both;
    float:left;
    min-width:90%;
    font: Tahoma;
    color: #006699;
    background-color: #FFFFFF;
    padding:0px 20px 10px 20px;
    display:inline;
    }

    /************* Body END *************************/

    /************** Header and Footer START ************************/
    #header {
    border: outset #FFFFFF;
    min-width:100%;
    height:100px;
    margin:0;
    float:left;
    color:#FFFFFF;
    background:#ED2E38;
    text-align:center;
    padding:0;
    position:fixed;
    /*top:0;*/
    left:0;
    z-index:99998;
    }

    #footer {
    border: outset #FFFFFF;
    min-width:100%;
    height:40px;
    margin:0;
    float:left;
    color:#FFFFFF;
    background:#ED2E38;
    text-align:center;
    padding:0;
    position:fixed;
    bottom:0;
    z-index:998;
    }

    wrap {
    position:relative;
    margin:0 auto;
    width:100%;
    }

    /************** Header and Footer END ************************/

  33. OK, I’ve got a ridiculous question. :)

    Why when I’m doing all this research on footers/sticky footers, does all the code always reference the as well? I don’t want to mess with my header or top navbar, just add a footer – so I ignore those portions of code, right?

    I’ve seen that several places, but you have the most comments, so here I am. :)

    Great write-up, thanks!

  34. Sherazad Ahmed says:

    Hi,

    Thank you for taking the time to post this. I had tried a few other solutions and could not get any of them to work.

  35. Jeremy says:

    This was great! Using this, as well as an example of using anchors in the fixed footer that go to the same page (which made things tricky) + Wouter’s code correction, I was able to experiment a bit:

    Here’s an example and its code: http://jsfiddle.net/Apokalupsis/F4nyf/4/

    Fixed Header/Footer + Same Page Anchors + Visible bottom of page (Footer no longer hiding content).

  36. Ananda says:

    I was having lots of trouble with my footer not staying put. I tried a bunch of different code options like margin-top:100% clear:both display”block position:absolute. None of that worked. Thanks for the tutorial, this made it stay, finally!

  37. Stephen Owen says:

    This has been so helpful! I’ve used this technique to customize a very slick customer monitoring portal. Thanks CSSGirl!

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>