Making Your Footer Stay Put With CSS

by Jonathan Longnecker

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 :(

January 14, 2008

Design, Tutorials

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. Hey Pavan, if you’re doing a print stylesheet, just take out most of the min-height stuff and positioning. As long as the footer comes after your content it should be in the right place. It’s a good idea to have a print and screen stylesheet anyway, especially if you know the page will be printed a lot.

  27. @Kevin, I’m not sure why you would have a scroll bar on shorter pages; I’d have to see some code or something. I would guess it has something to do with not changing all the heights to the same value. I know if I miss the clearfooter div it makes the page taller than it should be.

  28. @ Jonathan, I’ve checked your portfolio in IE6 and it works really fine. I guess, something was amiss when I was implementing the similar solution. Thanks.

  29. That’s really helpful I was trying to work that out last time and gave up ..will give it a go again with this tute smile

  30. I’m fairly sure it is something in one of my inherited css styles. If I figure it out I’ll post an update, and if I don’t I’ll post some code.

    Thanks.

    Kevin

  31. Nice, but there’s a way to work around using an empty DIV (something that should be avoided) to clear everything. Just add overflow:auto; to the container DIV and it should work perfectly.

  32. Interesting approach.

    However, most designers I know have been using Cameron Adam’s FooterStickAlt solution for quite some time.

    http://www.themaninblue.com/writing/perspective/2005/08/29/

    It works a treat.

  33. Great Code. One thing in fire fox it seems the push div is covering my footer in firefox. It looks right but you can not click the links in the footer only ie…
    Any suggestions

  34. Hey Derek,  I’m not sure I follow what your problem is. Code or a link might help.

    @everyone else: thanks for all the great alternate methods. Whenever I get a chance to catch my breath I’ll try them out and update the post accordingly!

  35. it just wont work

    i’m so noob =(

  36. Hey temhawk, what part of it isn’t working?

  37. I think the problem was the way I had styled the #container. You’re probably not supposed to have it absolutely positioned, but I had, and if I gave up that absolute positioning, the whole page would become screwed.

    Anyway, I redid all the html and css, but I used a different method, which I found a bit easier to understand. ( http://alistapart.com/articles/footers )

    That method apparently also needs some javascript to fix in some IE versions. but I didn’t do that, so I don’t know if it’s necessary (because I think there is a shorter css way to fix it with IE conditional comment/hack, but I can’t test that since I don’t have IE…)

    Thanks for the quick reply, I could have easily needed help with this today, but for some reason I got lucky yesterday (after spending two full days trying to make a footer!!!!) and I’m OK for now smile

    PS: I haven’t asked anyone yet, but I thought about it very much in my desperate attempts at footers the last few days, but is it going to be easier in css 3 to do footers? I hope so =S

  38. Glad you got it figured out, temhawk. Not sure about CSS3; When IE starts to support it then I’ll worry about it smile

  39. If I were you I’d worry about whether I will ever have to worry about CSS3 when (IF) IE starts to support it.

    By the way, is IE8 going to be any different than the past seven plagues? I also thought Microsoft didn’t want to continue making IE after version 7. I guess they wont back down too quickly long face

  40. Hahaha, 7 plagues. I just laughed out loud! I don’t know if it’ll be better or not. Surely, since IE7 was better than 6. From what I’ve read they seem like they are trying to support standards better. Here’s to hoping! tongue wink

  41. thx for the code.

  42. Ooh, thanks for this tutorial! It very useful, especially for my next design works.

  43. I’m not sure what I’ve done wrong, but the footer appears at the bottom of the window, not the bottom of the page.
    http://www.dvreground.com/footer/index2.html
    http://www.dvreground.com/footer/styles/main.css
    http://www.dvreground.com/footer/styles/ie6.css
    Could you look at the code and see what I’ve done wrong?
    Also, don’t worry about no images I uploaded it just so you could look at the code

  44. Looks fine in Safari and Firefox but yeah it’s a mess in IE6. I would first try using pixels for your height and negative margins and then try taking out your “pAreas.” Since they’re all positioned absolutely and not floated I think that may be part of the problem. Just put a bunch of text in the container div and see what happens.

  45. That’s interesting, because i have Firefox (maybe your using Firefox 3, which I don’t have). I don’t have IE6 though. In IE7, it was messed up as well.
    I’ve got it working now, but I would prefer not to have them floated as it keeps them relatively pushed together at higher resolutions.

  46. Nope, I was using Firefox 2. If you use ems for your padding it will shrink and grow based on the width of the browser window. I rarely use absolute positioning as it doesn’t seem to have good cross-browser support. Floats are more reliable smile Just make sure you put display: inline on them for IE6 or it’ll double your margins. Good luck to you!

  47. thank you, that’s what I needed smile)))))  :**

  48. Hey thanks for the awesome tutorial. Footers have been the one extremely frustrating element I’ve yet to figure out, this just put me over.

  49. Hey Domotronic, glad to be of help! Go make some kick-awesome.

  50. this is what i was looking for exactly…
    thanks a lot..

    selamlar

  51. nice tutorial. thanks for sharing with us

  52. The problem I’ve found with Ryan’s sticky footer is that it doesn’t take kindley to using margin’s within the content pane. I almost always always need to use margins AND padding, and hence can’t substitute the former for the latter as he suggests.

    I’m going to try this method you’ve explained in your blog. Thanks.

  53. Heyyy, this is great!  It’s the one thing I found that was easy to read and actually worked.  Thaaaanks. :D

  54. Good tutorial and easy to understand, many thanks.

  55. Thank you so much. I’ve been searching all morning to find a fix to my footer issue.
    content height ? 100% thats right! Thank you thank you thank you

  56. Got a nice blog site. keep blogging now.

  57. Thanks much for the tip, this has always annoyed me as well.  CSS is nice, but definitely a few quarky things like this that make it difficult.

  58. amazing. i spent several hours trying to figure this one out until i read your post. so helpful!!! thanks smile

  59. Hi,

    I have used this solution and it works well. However, i get the vertical scroll-bar no matter the size of the page is. I need to get this to work with no scroll bars on screens with smaller contents. Can you please suggest an alternative?

    Thanks
    Bindhu

  60. Hey Bindhu, it doesn’t create scroll bars unless the content is long enough to do so. Double check you’ve set the same height in all three places: container (negative bottom margin), clearfooter and footer.

  61. Hi, thanks a lot for this beautiful tutorial! I’ve been looking for this for a long time!
    Now it finally works for me, there is just one thing.. it doesn’t seem to be working in IE7.. would you know how this comes?

    Thanks in advance for looking at the page and thanks again for the tut!

  62. Hi Raphaël,

    It should work just fine in all the browsers; you may want to run through the tutorial again and double check everything. Make sure you’ve got the same pixel number for the height of the footer, height of the clearfooter and negative margin on the container.

  63. I have gone through the tutorial numerous times, all the heights are correct. I just can’t figure it out.
    It works in all browsers accept IE7.

  64. It seems to work fine in IE7 over here..if you’re referring to the Alizé site.

  65. I am, if you click on the AVC text in the footer you will see that the footer doesn’t get stretched to the bottom.
    Somehow I think the clearfooter div doesn’t work in IE7?

  66. I’m not sure exactly what’s going on there, but your background stops halfway through and it stops where the footer stops so it looks like somethings’ s not closed or cleared properly. It’s doing the same thing in every browser, but IE7 isn’t as forgiving. I did a quick validation check on that page and there’s almost 400 errors, so that would be the best place to start. If you get those cleared up and it’s still doing it, let me know!

  67. Seems I’ve got the opposite problem that Raphael had, the footer doesn’t stick to the bottom of the page in any browser except IE ha ha. Any ideas what would be causing that?

  68. My bad! I was premature, I had kept an old div from another sticky footer attempt ha ha. Thanks for sharing your method, much appreciated!

  69. Hey Chuck, yeah man you gotta watch those extra divs! Glad we could be of help; good luck!

  70. Thank you much!!!

  71. Hi!
    This great tutorial finally solved my problem!!!
    I have one tip for those who have web hosting with PHP support.
    I found a browser detection script that can return the browser type and version number.
    It could be used instead of the ie6 CSS file hack in some cases.

    An example how this script could be used:
    If the browser type is ie and the version number is smaller than 7,
    echo out IE6 specific CSS code.
    Otherwise echo out the CSS for modern browsers.

    The script works with a wide range of browsers (if not with all of them)
    and there are many ways how to use it.
    The script’s home page:
    http://techpatterns.com/

    Keep on coding!!!

  72. @MatejGolian Thanks, but I don’t really see how that’s any different. You’re still specifying IE6 specific CSS anyway. Now if you could use it target some other browser, like say Firefox that would be interesting. I ran into a bug in FF3 that would have been nice to target with CSS until they got it fixed.

  73. To Jonathan:
    I guess, you can use the script to detect any type of browser from Safari Internet Explorer, Opera to Firefox (Of course I’m not 100% sure. = I’m not an expert.).

    Quote from the page (Sorry if a bit long.):
    “This script uses arrays to hold both browser and OS versions. It checks these against the navigatorUserAgent() strings, then packs either os or browser variables with the proper browser and os information. It also features several different test return conditions which should cover most situations you run across.
    The main advantages of this browser detection script is that it will not be fooled by Opera or Safari, no matter how Opera is set to identify itself. It can also be used to deliver browser specific CSS stylesheets to the page depending on what browser is requesting the page. Since this is run on the server side, it doesn’t require client side Javascripting to be enabled to function.
    This code is more or less what we use for all our websites, in one form or another, when we need to set browser CSS and other coding particulars.
    Currently this script identifies the following specific browsers: Opera, Internet Explorer 4, Internet Explorer, Mozilla/Netscape Gecko based browsers, Netscape 4.x, Konqueror, Safari. It id’s Linux, Mac, most of the main Unix flavors, Windows NT, Windows regular. It is easy to add more browsers and OS’s if required.”

    It returned Firefox 3 data as:
    browser: moz
    version number: 1.9.
    I’m not sure if this is correct or not.

  74. Help!!!!
    Im having some troubleshooting with firefox and the sticky bottom footer:

    Before adding your code, iv being used a background image at the very bottom behind the actual footer to be x-repeated at the “html” class tag in css. (As well, an x-repeated background image at the very top that goes at “body” class tag in css). When i add your solution works great for the actual footer in all browsers (including firefox). BUT the x-repeated bg image at the bottom in the html class doesnt stick to the real website´s bottom, just sticks at the Firefox browser window, so once you scroll you can see a gap between this bg and the actual footer.

    removing the “height:100%:” at the html, body class, i noticed this bg sticks back to the very bottom, but the actual footer doesnt…

    How can i solve this silly problem in firefox? Setting both xrepeated bg image and footer sticked together against the bottom?

    here`s the Url : http://www.srgordo.com/oliva
    it works perfect either in ie or safari

  75. Sorry guys! raspberry
    I spend a while trying to solve it by myself and actually i found the mistake. 

    I shouldnt use the html class to set the bg image at the bottom. i built another footer div wraping around the “actual” footer with a 100% width and set the x-repeated bg there. Do you think its alright?

    Now, it sticks at the bottom as i wanted, thanks a lot for your tutorial!

  76. @marchello Oh good! I was just looking at it and couldn’t find any difference smile Yeah, I’ve run into the same problem of trying to repeat bg images on HTML and Body…for some reason they don’t play nice reliably. Sound like you figured out a good solution. Good luck to you!

  77. Great post.  It works by itself, but when I attempt to implement it into my code, the footer ends up covering my content and does not stick at the bottom of the page under the content like I want it to. 

    Right now, my markup is like this:

    #container
      #header
      #nav
      #content
      #sidebar

    I think the problem has something to do with my #main-content div and how I have it laying on top of an image. 

    I just want the *happy word* footer to stay under my content div and I cannot for the life of me figure out what’s wrong.

  78. Hi jonathan, thanks for the tutorial :D
    I implemented it on a site i’m doing http://www.easybookkeeping.net.au/index.html  but on IE 6 it’s not sitting at the bottom of the page when the content is short ?

    on ffox i’ts working ok. smile

  79. huhuhu… why didn’t it work when i tried it??......

    i’ll still gonna do a second try tomorrow, for now,,, i have to get some sleep, or else, i’m gonna turn into a ZOMBIE sick !... just kidding.. hehe xx smile

  80. hehehe… thanks for checking it out. smile

  81. Hey Julius, You’re still calling your container as a div id on your IE6 stylesheet, but it’s a class on your site. Probably from copying and pasting from ours. Change it to:

    .container {
    height: 100%;
    }

  82. Hi Jonathan, thanks soo much, It works!! Appreciate your time helping me smile

  83. it is a very nice work. Keep up. I enjoyed reading it. Thnaks

  84. Awesome tutorial ! smile

    If any got vertical scrollbar with small amount of content,

    It is like that because you putted .clearfooter OUTSIDE container.. and you MUST put .clearfooter INSIDE container div smile

    In my case container means wrapper wink

  85. Good call Charlie! Also if you add padding or margin to your footer, don’t forget to add that to that magic number you have to put on the footer, clearfooter and container.

  86. Thanks Jonathan !
    Yes the magic number is also important smile I hope to see more cool tuts like that one :D

  87. I’ll try this (and the problem with other similar solutions, by the way, is with firefox 3, not with ie7), but would it not be a good idea to include a box which contains all of the final css and another which contains all of the final html?  would save the user the trouble of assembling these little snippets.

  88. Hey Founder, yeah it would be a little bit easier, but I think it’s much better if you understand it rather than copy and paste wink

  89. it did not, by the way, work for me
    but I found another solution, though again it works better in ie7 than in ff3

  90. Hey Founder, sorry you couldn’t get it to work. I’ve used it on like 15 sites so I know it’s solid. Usually just a typo or something if it’s not working.  Although if you’re having trouble with FF3 there may be other problems with your layout. IE7 is the one that’s hard to deal with. smile

  91. Hi guys,

    I am having issues getting this to work in Firefox and Google Chrome (IE 6 is fine, but haven’t test IE 7 yet).

    To help you understand my situation better, I have a Wrapper and then a Container within the wrapper.  I am sure that’s my issue, but I can’t do without the nested containers.

    Take a look at this site to see my issue.  Footer isn’t sticking in Firefox 3.0.5 or Google Chrome.
    http://dev.harvestreston.org/Mens.aspx

  92. My screen resolution is 1280 x 1024, so I am sure for some users it will be fine, but not those who are using the same resolution (or greater) as me.

  93. Hello Audiospirit,

    It looks like you have to many closing divs smile Or maybe Im wrong.. anyway it look like your div with class clear footer is OUTSIDE wrapper… itshould be IN WRAPPER DIV at end of it if you will do that it will work perfectly ;]

  94. Everything checked out ok on that note.  I was probably doing some changes when you caught the clear footer outside. 

    THE FIX:
    Since this website in using ASP.NET, the CSS requires the inclusion of the “form” element when adding 100% height values to html and body.

    BEFORE: 
    html, body {
                      height:100%;
    }

    AFTER: 
    html, form, body {
                      height:100%;
    }

    Problem solved!

  95. @audiospirit Good call on the form element. I’m not that familiar with ASP so I’m glad you figured out what was going on.

  96. Have somebody tested this solution with a page with JS based accordions or slide-downs?

  97. @sevgilier Yeah this site has some slide downs in the portfolio section. Just click the contact button under each entry to see what I mean. Should work just fine.

  98. This is a great blog, thank you for putting this information up.

    I’ve been struggling with this method for awhile now. I thought I had everything shipshape until I hit this snag:

    http://brianborupub.com/testbed/whoisbb.html

    This page has more content than the others built so far and the footer no longer behaves properly in FF2 on the Mac. I haven’t tried it on other browsers/systems yet. However, the other pages have been tested across browsers/systems and are fine.

    I would appreciate any help you can give!

  99. @hgranger I don’t have FF2 anymore. If you could make sure your code validates and test on other browsers first that will help narrow things down.

  100. Hi Jonathan,

    Sorry if I wasn’t clear… the code validates (except for missing alts), that is the first thing I checked.

    I have tested it across browsers and systems now and found the behavior consistent but not what I hoped for!  downer

    I’m guessing it is a positioning or a padding issue. I’m off to wrassle with it now, thanks for your help!

  101. No problem! Looks like it’s because your right info div is absolutely positioned. Take that off and float the left and right info divs accordingly (and add widths). If you want the right one to grow and shrink with the browser you’ll need to look into a fluid with fixed sidebar layout. I can’t recall exactly how to do it, but a Google search should help. I just remember it was weird and kind of messed with my head smile

  102. Hah! Yes, I am looking at something like that now and it is a brain kinker! Ah well, when I get it figured out I will post it somewhere and let the world know…

    cool smile

  103. thank you…

  104. Hi, nice tutorial!

    I dont know whats going on but when I do it, rather than the footer being at the bottom of the page, it actually sits exactly below the viewable page. So basically i see the page and there is a scrollbar to the right, and I have to scroll down to see the footer. the amount I scroll though is exactly the size of the footer.
    Doesnt matter how I resize the browser window, its exactly the same. Footer will always site just below the “view” line.

    Triple checked everything, followed your guide to the letter.

  105. @edward, sorry man I need a visual; I have no idea what you’re trying to describe. Is it in every browser? Is your code valid? More info would help wink

  106. Very clear and easy to follow tutorial.

    Unfortunately I’m having the same issue that the footer is lying just below the viewport. It’s acting as if I don’t have the negative margin on the bottom of the container. In fact, if I double the negative margin, then the footer moves up so you can see it in the viewport, leaving the same amount of body space below the footer.

    It acts like this in FF3, IE7, Chrome and Safari, so it’s something in how I’ve coded it. The site validates fine.

    http://wisecatwebdesign.com/staticsite

    This is a set up for creating a template for a particular CMS, so there are a couple extra divs and things in the code to make it easier to port over.

    When/if I locate what I’m missing, I’ll post here to see if it will fix your problem as well, @edward.

    This site is not likely to stay in this staging area for a long time, so if you are reading these comments in a few months, the site probably won’t be there.

  107. Jonathan, thanks for replying sorry I didnt reply back so soon. I was gonna post an example but Andrea has just described my problem exactly. I’m glad to know I’m not the only one having this problem.

  108. @Andrea, I’ve looked this a bit and I’m not sure what the problem is. I think it might be that your header is not inside the container…seems like it’s getting pushed down about as far as the header is tall. But without hacking up the HTML I’m not sure smile

  109. I don’t think its the header pushing it down because if that were so wouldnt that mean it is pushed down as far as the header tall ? With mine I’ve set the footer to 50px and the header is probably something like 80px tall. Yet the footer isnt pushed down by 80px, but rather by 50px.

    It seems that it is being pushed down according to the size of the footer rather than header.

    Would you like a zip of my code (its really really short) to take a look yourself?
    Anyway thanks Jonathan and Andrea.

  110. Well, it’s nice to know that I’m not missing something obvious.  I swapped the container div start to above the header and it does make the footer work fine. Of course, it screws up my header background… I’ll play around with it later this week and see if I can get both of them to work together.

    Thanks for taking the time to look at my code.  You wrote a great tutorial and it’s not your responsibility to fix all of our coding issues. I appreciate the time you’ve taken to do so.

  111. Ok, ok, I’m supposed to be working on another deadline, but I couldn’t just leave it at that.

    Instead of reusing the “container” div I already had, I created an additional div “containerwrap” that contained the header plus my old container. I moved the pertinent layout css from container to containerwrap and now both the footer and the header are working as I’d like. I checked it in IE7, Firefox, chrome, and safari. I don’t have easy access to ie6 so I’ll check that later.

  112. Hahaha yeah I know what you mean…those things bug me; can’t let them go. Glad you got it figured out! Hopefully IE6 will play nice. That’s wishful thinking though smile

  113. Thanks I had this problem on my web site. And here I can see a great solution (one of the best I’ve ever seen).

  114. doesn’t work with the given code.

    fix: add to container
    padding-bottom: 330px;

Behold our Amazing Portfolio

Check it Out