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. 1

    Joe Calabrese - Jan 20, 2008

    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. 2

    Nate Croft - Jan 21, 2008

    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. 3

    DansNetwork - Jan 21, 2008

    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. {screen_name}

    Jonathan Longnecker - Jan 22, 2008

    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. 5

    Keir - Jan 23, 2008

    Hi ho cowboys,

    Helpful post - muchas gracia LOL

  6. 6

    Stewart - Jan 24, 2008

    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. 7

    Fredrik - Jan 24, 2008

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

  8. 8

    egypt web design - Jan 26, 2008

    VERY NICE!  i will try in my next css website

  9. 9

    Nate Croft - Jan 26, 2008

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

  10. {screen_name}

    Jonathan Longnecker - Jan 28, 2008

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

  11. 11

    dirty bird design - Jan 29, 2008

    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. 12

    john - Feb 06, 2008

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

  13. 13

    Sean Farrell - Feb 12, 2008

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

    great tip, thanks so much!

  14. 14

    Hemsida Göteborg - Feb 19, 2008

    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. 15

    tzmedia - Mar 04, 2008

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

  16. 16

    Mao - Mar 08, 2008

    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. 17

    Nico Du Plessis - Mar 13, 2008

    Brilliant article, always struggle with this one!

  18. 18

    Egypt Web Design Company - Mar 25, 2008

    Seriously this is Perfect Great Job

  19. 19

    Mark - Apr 17, 2008

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

  20. {screen_name}

    Jonathan Longnecker - Apr 17, 2008

    @ 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. 21

    Pavan - Apr 18, 2008

    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. 22

    Kevin - Apr 22, 2008

    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. 23

    Victoria Pavlova - Apr 22, 2008

    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. 24

    Ty - Apr 22, 2008

    @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. {screen_name}

    Jonathan Longnecker - Apr 22, 2008

    @ 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. {screen_name}

    Jonathan Longnecker - Apr 22, 2008

    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. {screen_name}

    Jonathan Longnecker - Apr 22, 2008

    @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. 28

    Victoria Pavlova - Apr 22, 2008

    @ 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. 29

    aronil - Apr 22, 2008

    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. 30

    Kevin - Apr 22, 2008

    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. 31

    Dan Philibin - Apr 26, 2008

    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. 32

    Jay - Apr 27, 2008

    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. 33

    Derek - May 19, 2008

    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. {screen_name}

    Jonathan Longnecker - May 20, 2008

    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. 35

    temhawk - May 24, 2008

    it just wont work

    i’m so noob =(

  36. {screen_name}

    Jonathan Longnecker - May 26, 2008

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

  37. 37

    temhawk - May 26, 2008

    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. {screen_name}

    Jonathan Longnecker - May 27, 2008

    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. 39

    temhawk - May 27, 2008

    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. {screen_name}

    Jonathan Longnecker - May 27, 2008

    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. 41

    Meet Women - May 28, 2008

    thx for the code.

  42. 42

    Kichigai-san - Jun 11, 2008

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

  43. 43

    jim - Jun 11, 2008

    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. {screen_name}

    Jonathan Longnecker - Jun 12, 2008

    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. 45

    jim - Jun 12, 2008

    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. {screen_name}

    Jonathan Longnecker - Jun 13, 2008

    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. 47

    schpoe - Jun 15, 2008

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

  48. 48

    domotronic - Jun 21, 2008

    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. {screen_name}

    Jonathan Longnecker - Jun 21, 2008

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

  50. 50

    tasarhane - Jun 27, 2008

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

    selamlar

  51. 51

    web design - Jul 10, 2008

    nice tutorial. thanks for sharing with us

  52. 52

    Andrew - Jul 18, 2008

    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. 53

    Tiffani - Jul 23, 2008

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

  54. 54

    Per - Jul 27, 2008

    Good tutorial and easy to understand, many thanks.

  55. 55

    Jake - Aug 01, 2008

    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. 56

    pitter - Aug 04, 2008

    Got a nice blog site. keep blogging now.

  57. 57

    Games - Aug 04, 2008

    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. 58

    sean - Aug 16, 2008

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

  59. 59

    Bindhu - Aug 22, 2008

    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. {screen_name}

    Jonathan Longnecker - Aug 23, 2008

    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. 61

    Raphaël - Oct 02, 2008

    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. {screen_name}

    Jonathan Longnecker - Oct 02, 2008

    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. 63

    Raphaël - Oct 02, 2008

    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. {screen_name}

    Jonathan Longnecker - Oct 02, 2008

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

  65. 65

    Raphaël - Oct 02, 2008

    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. {screen_name}

    Jonathan Longnecker - Oct 02, 2008

    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. 67

    Chuck - Oct 02, 2008

    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. 68

    Chuck - Oct 02, 2008

    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. {screen_name}

    Jonathan Longnecker - Oct 03, 2008

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

  70. 70

    Beth - Oct 16, 2008

    Thank you much!!!

  71. 71

    MatejGolian - Nov 01, 2008

    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. {screen_name}

    Jonathan Longnecker - Nov 03, 2008

    @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. 73

    MatejGolian - Nov 08, 2008

    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. 74

    marchello - Nov 09, 2008

    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. 75

    marchello - Nov 09, 2008

    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. {screen_name}

    Jonathan Longnecker - Nov 10, 2008

    @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. 77

    Joe - Nov 27, 2008

    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. 78

    Julius - Dec 12, 2008

    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. 79

    Ann - Dec 13, 2008

    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. 80

    Julius - Dec 13, 2008

    hehehe… thanks for checking it out. smile

  81. {screen_name}

    Jonathan Longnecker - Dec 14, 2008

    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. 82

    Julius - Dec 15, 2008

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

  83. 83

    Daniel - Dec 17, 2008

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

  84. 84

    Charlie - Dec 18, 2008

    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. {screen_name}

    Jonathan Longnecker - Dec 18, 2008

    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. 86

    Charlie - Dec 18, 2008

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

  87. 87

    founder webbizltd - Dec 24, 2008

    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. {screen_name}

    Jonathan Longnecker - Dec 26, 2008

    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. 89

    founder - Jan 07, 2009

    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. {screen_name}

    Jonathan Longnecker - Jan 08, 2009

    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. 91

    audiospirit - Jan 14, 2009

    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. 92

    audiospirit - Jan 14, 2009

    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. 93

    Charlie - Jan 14, 2009

    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. 94

    audiospirit - Jan 14, 2009

    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. {screen_name}

    Jonathan Longnecker - Jan 14, 2009

    @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. 96

    sevgililer gunu - Jan 16, 2009

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

  97. {screen_name}

    Jonathan Longnecker - Jan 16, 2009

    @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. 98

    hgranger - Jan 22, 2009

    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. {screen_name}

    Jonathan Longnecker - Jan 22, 2009

    @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. 100

    hgranger - Jan 23, 2009

    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. {screen_name}

    Jonathan Longnecker - Jan 23, 2009

    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. 102

    hgranger - Jan 23, 2009

    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. 103

    güvenlik sistemleri - Feb 11, 2009

    thank you…

  104. 104

    edward - Feb 19, 2009

    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. {screen_name}

    Jonathan Longnecker - Feb 20, 2009

    @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. 106

    Andrea Tarr - Feb 20, 2009

    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. 107

    Edward - Feb 21, 2009

    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. {screen_name}

    Jonathan Longnecker - Feb 23, 2009

    @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. 109

    edward - Feb 23, 2009

    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. 110

    Andrea Tarr - Feb 23, 2009

    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. 111

    Andrea Tarr - Feb 23, 2009

    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. {screen_name}

    Jonathan Longnecker - Feb 23, 2009

    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. 113

    Alex Velickyi - Feb 25, 2009

    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. 114

    Bobby - Feb 26, 2009

    doesn’t work with the given code.

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

Behold our Amazing Portfolio

Check it Out