footerStickAlt: A more robust method of positioning a footer

29 August 2005

108 comments

A Blue Perspective: footerStickAlt: A more robust method of positioning a footer

» footerStickAlt «

Updated: 4:40PM, 29 August 2005 (See comment #6)

Recently I've been asked to code up a few sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.

A quick search on Google immediately brought up solarDreamStudio's immensely helpful tutorial on how to do just this, and so I promptly implemented, with results achieved just as you see on the packet.

However, as my pages began to get a bit more complex, in one browser I began to see an intermittent bug. No, not Internet Explorer, but Firefox/Mozilla.

What happened was that when I viewed a page with a few images on it, Firefox would incorrectly position the footer on long pages (ones that scrolled below the bottom of the browser window). If you don't have Firefox handy, you can view a screenshot of the bug. However, this bug would only happen the first time I visited a page – any subsequent visits and the footer would be fine; until the cache had to be refreshed again (I presume – try clicking shift-refresh to reload the bug). This behaviour was just enough to make the method a no-go for me, and I reformulated the page design without a sticking footer.

A later project – whose design was out of my hands – absolutely required a sticking footer, so I had to once again delve back into the CSS code and figure out a solution. After a bit of experimentation, this is what I came up with.

Based off the original footerStick, footerStickAlt sets up the Web page so that it will span the entire height of the browser window, even if the content is less than the height of the browser window. However, where footerStick then used absolute "bottom" positioning to get the footer to appear at the bottom of the screen/content, footerStickAlt positions the footer outside the height of the content, and then applies a negative margin to get it to display inside the browser window.

So, where footerStick's code requires you to place the footer inside a containing element, footerStickAlt requires you to place it outside the element:

<html>
<body>
<div id="nonFooter">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

You then need to apply a bit of CSS:

html
{
height: 100%;
}

body
{
height: 100%;
}

#nonFooter
{
position: relative;
min-height: 100%;
}

* html #nonFooter
{
height: 100%;
}

#content
{
padding-bottom: 9em;
}

#footer
{
position: relative;
margin-top: -7.5em;
}

All of the styling on elements other than #footer are to get the height of the content area correct – the detailed explanation is available on solarDreamStudio's footerStick page. The main difference that footerStickAlt has is the style rules for #footer. It is positioned relatively to where it would normally be (underneath the content), and a negative margin moves it up into view.

In the case where the Web page's contents do not take up the entire browser window, the footer will naturally be positioned just below the bottom of the window. Once we specify a negative margin that is equal to the height of the footer, it will bring it back into view, with its bottom resting on the edge of the window.

For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content, as you can see in the CSS above.

The only drawback to footerStickAlt is that you must know the exact height of your footer (whether it be in absolute or relative pixels). However, you have to know this roughly with the original version anyway, in order to make room for the footer at the bottom of the content. It's generally a non-issue with footers anyway, as they have limited information and a sparse layout.

footerStickAlt has been tested and passed in Internet Explorer 5.01 for Windows, Internet Explorer 5.5 for Windows, Opera 7.51 for Windows, Opera 8.0 for Windows, Internet Explorer 6 for Windows, Firefox 1.04 for Windows, Firefox 1.02 for OSX & Safari 1.3 for OSX.

Thanks to solarDreamStudios for kicking me off on the right path.

Categories

, , ,

Comments

  1. 1/108

    CornedBee commented on 29 August 2005 @ 06:25

    The Mozilla issue is most likely a known bug concerning absolutely positioned elements and reflow issues. I encountered it with an absolutely positioned submit button and a script that would add and remove form elements. The submit button is not reflowed and thus doesn't move when an element is added or removed.

    Your problem seems to be the same, except that it's the image dimensions that cause the problems. Giving each image a dimension in the HTML should have solved the original problem.

  2. 2/108

    Scott commented on 29 August 2005 @ 07:08

    I saw the bug on footerStickAlt with long content on your demo page, which was the first link that I clicked (firefox 1.0.6 win.)  After that first click, none of the  demo pages had any issues.  Perhaps this bug isn't totally licked yet.

  3. 3/108

    graste commented on 29 August 2005 @ 07:47

    "footerStickAlt example with long content" imho has the same problems in opera8.01 here as in the "normal" method. Works as intended on cached version - on page refresh with f5 the footer is not on the browser window bottom. :\

  4. 4/108

    John Resig commented on 29 August 2005 @ 10:28

    I can confirm the same bug as graste with Opera 8 Beta on FreeBSD.

  5. 5/108

    Jonathan Snook commented on 29 August 2005 @ 12:57

    I was playing around with your examples and footerstickAlt with long content doesn't move the footer to the bottom. FF1.0.6/Win. Odd that.

  6. 6/108

    The Man in Blue commented on 29 August 2005 @ 16:01

    See, that's why you guys are such good testers :)

    footerStickAlt has been fixed by replacing the footer's "position: absolute" with "position: relative".

    I actually think this is what I had in later iterations, but just forgot why I had it there.

    Re-tested in all the browsers mentioned.

    I never got a bug in Opera with the original footerStick, let alone footerStickAlt, so it's hard to verify what some people are reporting, but hopefully the code change should fix it.

  7. 7/108

    Jonathan Snook commented on 29 August 2005 @ 21:17

    Um, are you sure you uploaded it again? The long content one still isn't sticking to the bottom. Have I mentioned that I'm at 1600x1200? :)

  8. 8/108

    The Man in Blue commented on 29 August 2005 @ 22:03

    You're a hard man to please Jonathan :P

    There was a missing closing tag for one of the elements. Fixed now.

    OK -- re-tested in all the browsers mentioned AND at 1600 x 1200 :)

  9. 9/108

    Jonathan Snook commented on 29 August 2005 @ 23:40

    Ah, much better! :) Bookmarked!

  10. 10/108

    Craig commented on 30 August 2005 @ 02:58

    Awesome!!! Thanks for fixing this. I really appreciate it.

  11. 11/108

    The Man in Blue commented on 30 August 2005 @ 03:08

    Oh yeah, I forgot to tell you ... :D

  12. 12/108

    Wesley Walser commented on 30 August 2005 @ 07:05

    Not directly related but rather related to the bug that you mentioned. Can anyone confirm that this bug is the same that is causing some navigations not to show up on first load for sites like http://www.trinity401k.com/ ?

    Also not related but something I am happy about. widgEditor now works nicely with tabindexes in firefox. I remember when it was first implemented firefox would tab to the frame, but not put a cursor in it. Not sure if this was a change in firefox, or widgEditor but either way happy to see it working. I tried to get it working for a while and found some documentation on the differances between ie's implementation of tab vs firefox's but never a fix.

    Good stuff, bookmarked as well. (your #10 on del.icio.us/popular BTW)

  13. 13/108

    Ruy commented on 31 August 2005 @ 12:22

    Oh hell yes, it took me so so very long to  figure out what caused the weird positioning in the original footerStick. I pretty much gave up and just made sure to specify the height of contained elements to make it work.

    Thanks a million for a proper fix!

  14. 14/108

    Tim commented on 1 September 2005 @ 12:40

    Good job, Cameron. Some time ago I posted some "footer-bottoming" solutions among my tutorials, but this is clearly superior to anything I was able to work up. Thumbs up!

  15. 15/108

    Nathan Smith commented on 1 September 2005 @ 14:17

    This is awesome.  I've been a long-time fan of Craig and his work, but when trying the original method got discouraged pretty quickly.  So, this is the merging of two great ideas into one.  Thanks for getting it to work, and for sharing the new method.

  16. 16/108

    Adam commented on 2 September 2005 @ 16:28

    Hi, I am attempting to implement your hack, and I have done it properly (pretty sure), but I am having the following problem:

    When the content is taller than the page, the the base of my footer is being aligned with the base of the content, rather than the top of the footer being aligned with the base of my content. Becuase of this, my 35px tall footer is overlapping the bottom 35px of my content. This happens in FF 1.0.6 and IE 6.0. Any ideas?

  17. 17/108

    Adam commented on 2 September 2005 @ 17:31

    This is what I get for working at 3 in the morning. I totally missed this:

    For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content.

    Bleh.

  18. 18/108

    Jeroen Coumans commented on 3 September 2005 @ 21:12

    Nice method, but it's too bad that it requires setting the height on three different elements, including a wrapper div. It seems that the only way to do this without additional markup is to use the table-display model as explained in http://www.w3.org/TR/CSS21/tables.html. Let's hope IE7 will fully support this, because it would solve a lot of these annoying CSS layout issues.

  19. 19/108

    The Man in Blue commented on 4 September 2005 @ 02:07

    Even using the table model you'd have to set the height on something, otherwise your table would collapse to minimal height. You'd probably still have to set height on <html> & <body> because the content has to know what "100%" it is taking it's height off.

  20. 20/108

    Simon commented on 5 September 2005 @ 00:00

    Nice improvement of the footerStick-Method. Thank you.

  21. 21/108

    Paul Debban commented on 5 September 2005 @ 06:41

    I found some additional weirdness with footerStickAlt in my copy of FireFox that occurs if #nonFooter has a background image and contains a div with a margin.

    In this case, the background image is shifted down by the top-margin of the inner div. However, if I give #nonFooter a border (a transparent border works). The background image is again positioned relative to #nonFooter and not the child div.

    I can apply the background to body and the same effect occurs. The background moves down to match the inner div unless I apply a border to #nonFooter.

  22. 22/108

    The Man in Blue commented on 5 September 2005 @ 15:21

    Paul: Exactly the same happens with any layout that you use, it's got nothing to do with the footer.

  23. 23/108

    Dan Dean commented on 7 September 2005 @ 02:19

    Thanks! No more cumbersome js to do this.

  24. 24/108

    Chuck Reynolds commented on 7 September 2005 @ 03:19

    Great work on this one - I'll have to implement on our next project requireing a sticky footer.  We've gotten around it before with either hacks or avoiding it all together with some fancy image work, but this sounds like it's a better alternative than most.   Thanks again.

  25. 25/108

    dusoft commented on 12 September 2005 @ 06:58

    Nice solution for everyone requiring this sticky footer. I have required this once, but then used different technique for positioning.

  26. 26/108

    Morgan commented on 12 September 2005 @ 16:19

    is there an actual download for this? it seems like i have to view:source and then set my url to download the imported css, then work backwards to strip the css i dont need. I don't see any concise source code to download, here or on the example site, and it's a headache trying to amend my project with this new method without this available. am i missing something?

  27. 27/108

    The Man in Blue commented on 12 September 2005 @ 16:34

    If there were a download, what exactly would you be downloading? It's a CSS technique, you can't just apply some file to your Web page and have it work.

    Read the explanation above and apply it to your own situation.

  28. 28/108

    Niccolo commented on 14 September 2005 @ 00:27

    I am wondering if need to adjust the

    -7.5em line depending on how big your footer is.

    My footer is 60px and I'm wondering how this works with the -7.5em line of code.

    can I use the code, solardreamstudios is doing, but then make the adjustments (like adding the footer outside the content and putting in the -7.5 em code.)

    Also, is a negative number validated as XHTML?

  29. 29/108

    The Man in Blue commented on 14 September 2005 @ 01:18

    Yep, change the -7.5em to whatever the height of your footer is. It's CSS, so it's got nothing to do with valid XHTML. And yes, you can use negative numbers in CSS.

    The code on this page is all that you need.

  30. 30/108

    Clark Cooper commented on 14 September 2005 @ 02:30

    This works great in IE; doesn't seem to work in Firefox.  Am I missing something?

  31. 31/108

    The Man in Blue commented on 14 September 2005 @ 03:21

    Works fine in all the Firefoxii I've seen. That's the whole point of it.

  32. 32/108

    Denver commented on 15 September 2005 @ 02:18

    Haven't you seen a little problems with footerStickAlt? I've got a very plain temporary website with only structural divs ("#page, #nonFooter and #footer"). When I insert some paragraphs into #nonFooter, everything seems to be ok. However, when this paragraphs has CSS rules with margins (e.g. #nonFooter p { margin-top: 1em; }, then IE's footer is still at the very bottom of the page, but Firefox's one is 1em under the bottom of my page...

    Any ideas?

  33. 33/108

    Denver commented on 15 September 2005 @ 02:27

    Sorry for my last question, but I've already found the solution - padding-bottom for the #content div is necessary (I removed it from my plain example), and then everything's ok.

  34. 34/108

    Niccolo commented on 15 September 2005 @ 08:20

    Thanks for the help..it appears to be working now.

    my main problem is that I want my footer centered on the page with my "non-footer"

    I added these lines of code to the footer:

    margin-top: -60px;
    margin: 0px auto;

    (obviously my footer is 60px)

    but without the margin: 0px auto; code the footer will not center.

    I am wondering if using those two lines of code together is ok.

    it appears to be working for me in ie and foxfire, but I am wondering if you could check it out on a mac with safari.

  35. 35/108

    Niccolo commented on 15 September 2005 @ 08:43

    yes there is a bug with the above post - with the margin: 0px auto; code it makes you scroll down 60 px's to see the footer.

    I am wondering if there is any other way to make it centered.

  36. 36/108

    The Man in Blue commented on 15 September 2005 @ 11:38

    Set it to:

    margin: -60px auto 0 auto;

  37. 37/108

    Niccolo commented on 15 September 2005 @ 11:44

    That worked, thanks!

  38. 38/108

    leo commented on 15 September 2005 @ 23:36

    Thanks for this, one question: Does the #nonFooter still need the position: relative?

    In the original method it was needed as the #footer was positioned absolutely, but now that is not the case.

    The reason I ask is that it is causing a wierd ie6/win bug whereby my h2's with border-bottom are not appearing correctly (first one has no border-bottom, subsequent ones are ok).

     

  39. 39/108

    The Man in Blue commented on 16 September 2005 @ 00:39

    Ummm ... actually, not sure whether #nonFooter needs to have position: relative on it. Why don't you try it out?

    Internet Explorer has plenty of display bugs that can sometimes be fixed by putting position: relative on the affected element. Just one of those things.

  40. 40/108

    Niccolo commented on 16 September 2005 @ 04:30

    Why does Foxfire's browser let the scroll bar on the right disappear and reapear depending if it's used.

    Using the footer sticker without the need to scroll causes Foxfire to make the content shift several pixels as the scroll bar appears and reappears as you change links.

    Is there a way to make the scroll bar always stay in place in Foxfire, like in IE when it's not used?

  41. 41/108

    The Man in Blue commented on 16 September 2005 @ 04:46

    How about you have a look on Google instead of posting all your CSS debug questions here?

    http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better

  42. 42/108

    Niccolo commented on 16 September 2005 @ 07:35

    Sorry for all the posts, but I feel I was bringing up some good points about coding related to the footer sticker alt code.

  43. 43/108

    David commented on 18 September 2005 @ 03:06

    I'm trying to nail down a bare bones implementation of this and struggling with Opera.  If I add a margin to elements (H1, P, etc.) contained within #nonfooter, Opera adds the margin(s) to the height and therefore pushes the footer below the viewport.

    See http://www.1cog.com/public/footer.html

    Any suggestions please?

  44. 44/108

    FLaKes.! commented on 18 September 2005 @ 18:51

    Thank you, thank you thank you soooo much. Ive been looking for a footer like this for weeks. I was about to give up on it and let it depend on the content. Now the new interface of the lake of chapala website will look better. Muchas Gracias.!

  45. 45/108

    The Man in Blue commented on 18 September 2005 @ 20:44

    > If I add a margin to elements (H1, P, etc.) contained within #nonfooter, Opera adds the margin(s) to the height and therefore pushes the footer below the viewport.

    Try putting a border or clearing element on the bottom of nonFooter.

  46. 46/108

    David commented on 19 September 2005 @ 00:11

    > Try putting a border or clearing element on the bottom of nonFooter.

    Perfect with border-bottom.  Thank you. http://www.1cog.com/public/footer.html updated.

  47. 47/108

    Matt Turner commented on 20 September 2005 @ 00:47

    Sorry, found another problemo!
    In internet explorer, if there is a javascript event attached to something in the footer, when the content is too long for the browser window you lose it. Presumably the non-footer div being at 100% height is obscuring it.

    Is there a way around this with javascript..something to do with layers / click throughs ??

    Really nice method otherwise, v.helpful.

  48. 48/108

    Manoj Sinha commented on 23 September 2005 @ 02:21

    The footer gets messed up when you turn off the CSS..I'm sure that could be fixed very easily though..

  49. 49/108

    The Man in Blue commented on 23 September 2005 @ 02:29

    WTF? What sort of comment's that? It's a CSS method. You turn off CSS, you just get the raw HTML.

  50. 50/108

    Graham Bannister commented on 23 September 2005 @ 07:59

    WTF - LOL! But on a more serious note
    http://www.1cog.com/public/footer.html example breaks in IE6.0 and Firefox 1.06 if the vertical height of the window is reduced so that the footer rises up over the text.
    When you then use the scroll bar to scroll down the page the very last line of text remains hidden under the footer.

  51. 51/108

    David commented on 1 October 2005 @ 03:00

    Graham, fixed: http://www.1cog.com/public/footer.html

  52. 52/108

    Martin Jopson commented on 7 October 2005 @ 16:19

    Nice work, looking forward to using this technique.

    Cam, you're the most intelligent Liverpool fan I've ever met... in fact you're the only intelligent Liverpool fan I've met! COYS!

  53. 53/108

    Ryan commented on 12 October 2005 @ 01:24

    Can anyone please help?????

    http://www.5agency.com/coltas/ works in IE but breaks in Firefox.

  54. 54/108

    Matt Turner commented on 13 October 2005 @ 19:50

    I earlier had a problem with this obscuring elements from FireFox for using events. It even obscured CSS rollover effects near the bottom of the page.

    If you have these kind of problems try putting an underscore in front of the position and margin-top in the footerstyle to hide them from FF + other compliant browsers. Didn't seem to alter the visual layout and enabled behaviours to work again. Only tested in FF and IE6 on windows.

  55. 55/108

    John White commented on 14 October 2005 @ 08:00

    I can not get this to work for me period in Firefox 1.0.7 works fine in IE. 

    I went as far as to re-code my test file using your example.  It works and looks great until you have more content then the screen resolution.  Then the footer sticks and the #page or #content background image dosen't stretch beyond screen res.  This is in firefox and safari. 

    What am I missing?
    A little help please.

    PS i even attempted that border trick to no avail.

  56. 56/108

    John White commented on 14 October 2005 @ 08:00

    sorry here is a link to the test file

    http://www.cleverfishmedia.com/testcss/ortemptest.html

  57. 57/108

    jazzle commented on 17 October 2005 @ 08:06

    FYI: The bug doesn't seem to appear in Fx 1.5b2.

  58. 58/108

    Mike Lane commented on 17 October 2005 @ 16:21

    I am having the exact same bug as John White.  The bug appears to me to be a deal breaker for firefox 1.0.x.  I have absolutely no clue why this isn't working on Firefox. 

  59. 59/108

    Mike Lane commented on 17 October 2005 @ 17:31

    I fiddled around with it.  In firefox when you set html {height:100%; border:1px solid red;} it works like it should (the border is obviously for visualization) meaning that the red border is around the viewport or the whole page whichever is taller.  When you putbody {height:100% ; border:1px solid #ff0;} you get a yellow border that is around the viewport or the content whichever is taller.  But when you put both

    html {height:100%; border:1px solid #f00}
    body {height:100%; border:1px solid #ff0}

    You get a red border that stretches to fit the content and a yellow border that is the height of the viewport.

    So regrettably this must be a firefox bug (which they must have fixed in 1.5b2 according to jazze).

  60. 60/108

    Cedric commented on 22 October 2005 @ 06:17

    Thanks for the tutorial and thanks for the bug fix help !

    All works perfectly for me.

  61. 61/108

    JO commented on 23 October 2005 @ 23:30

    html {height: 100%; margin-bottom: 1px;}
    FF MOZILLA
  62. 62/108

    Mike Lane commented on 26 October 2005 @ 11:59

    I checked this with ff 1.5b2 and it is still broken.

  63. 63/108

    Chris Smith commented on 27 October 2005 @ 01:45

    Hi,

    I like this explanation of how to get a footer to stick at the bottom of a page, its the simplest and clearest I have seen.

    However, there is one element missing from the layout - that's what is causing the problems with #footer appearing above content in #non-footer.

    #page {
      padding-top: 1px;  /* prevent collapsing margins escaping */
      padding-bottom: 7.5em; /* identical to height of #footer; */
    }

    ...
    <div id='non-footer'>
      <div id='page'>
      <!-- all the page content -->
      </div>
    </div>
    <div id='footer'>
    ...

    I use padding in the example as that avoids any issues with collapsing margins.

  64. 64/108

    Jo commented on 28 October 2005 @ 08:26

    in your example with long content <http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm>. Does this imply the links positioned stick at the bottom of the viewport but not the XXXX copyright notice -somehow the top of the footer is sticky to the bottom of viewport?

  65. 65/108

    html video codes commented on 31 October 2005 @ 20:13

    I was playing around with what Mike Lane wrote and everything seems to fine. I had another overlap which i fixed with a margin. Not sure how effective that is however it works with IE and firefox and I am happy.

  66. 66/108

    Mike Lane commented on 3 November 2005 @ 07:00

    html video codes...

    Do you have an example online?  No matter what I do, I can't get this to work.

  67. 67/108

    Nick Fairall commented on 6 November 2005 @ 23:10

    No mention of netscape?? Does it work in NS please? Thanks, Nick.

  68. 68/108

    Maxime commented on 8 November 2005 @ 12:58

    I've the same problem with FF 1.5b2.

  69. 69/108

    Niccolo commented on 9 November 2005 @ 19:43

    Please Help Me. I can't seem to find a fix to this on google.

    In IE it is ok, but in Safari, FireFox, Netscape, and Opera, the footer overlaps the left navigation column  when you:

    1. drag the browser window up to resize it to about halway up the screen.

    2. Then scroll down on the scrollbar.

    http://rbh.hdsb.ca/info/contact.htm

  70. 70/108

    The Man in Blue commented on 9 November 2005 @ 23:07

    For starters, get rid of the height on your #menu ul.

  71. 71/108

    Niccolo commented on 10 November 2005 @ 05:42

    Ok, I took care of that thanks for the help, MiB

    The problem is still there though, but clearing the height did manage to keep the footer from overlapping the nav, but now firefox, opera, netscape and safari leaves a huge gap instead.

    Any other suggestions?

    Thanks in advance.

    http://rbh.hdsb.ca/info/contact.htm

  72. 72/108

    Marty Stake commented on 11 November 2005 @ 05:57

    I think i found a Firefox fix for those who are having issues:

    I was in a situation where i was using a wrapper with a background extending 100% of the window on top of a body background extending 100% as well.

    <body>
    <html>
        <div id="wrapper">

    <div id="nonFooter">
            ..clearer
            </div> nonfooter

        </div> wrapper

        <div id="footer">
        </div>
    </body>
    </html>

    Firefox was placing the footer way below the browser window with a huge gap in wrapper background, and i also found the wrapper bg image was basically only as tall as the browser window.

    I think the height:100% on body was causing the buggy display, and as a result the nonFooter div was 100% of the body, which was not being calculated correctly.

    I found if I added bottom-padding to the nonFooter div, it created a hook (like a bottom border) and it made the body height calculate correctly. (If the padding is on the wrapper, it fixes the body calculation, but places the footer outside the window.

    This padding should be at least as big as your footer. If you don't do this, then your text inside of the footer div will show below the footer when you have a short browser window.

    Also, you need to add padding:0 to the IE/Win hack because its not min-height, but height, and the values add to more than 100%.

  73. 73/108

    Marty Stake commented on 11 November 2005 @ 06:36

    and heres some examples:

    this is my framework with the non-working firefox issue:
    http://www.martymix.com/sandbox/tmib-test.html

    and with the padding added in:
    http://www.martymix.com/sandbox/tmib-test-fixed.html

    Is there anything wrong with how I set up the page in that i needed to find the fix? Or is this now right -- I can't for the life of me figure out the difference in TMIB's working example and mine before the fix.

  74. 74/108

    Heiko commented on 15 November 2005 @ 03:06

    Is "position: relative" really necessary? I just implemented footerStickAlt in one of my websites, without "position: relative" (for both #footer and #nonFooter), and in Firefox 1.0.7, Opera 8.5 and even IE 5.5 it works perfectly, so what about leaving out "position: relative"?

  75. 75/108

    Gord commented on 17 November 2005 @ 07:46

    I seem to be having some trouble implementing this technique.  It *almost* works, but on some of my pages, the footer is overlapping the bottom portion of my content.  Does anyone have any suggestions?

  76. 76/108

    Wendy commented on 17 November 2005 @ 08:58

    This is great however I am experiencing an issue with shorter content - I get a longer page with scrollbars, with the footer at the bottom. If I remove height: 100: from the body it fixes it but then of course stuffs up the footer again. What am I doing wrong?

  77. 77/108

    Wendy commented on 19 November 2005 @ 13:44

    my problem appears isolated to switching to fullscreen mode - my content does this as it launchs from a LMS. Pity... 

  78. 78/108

    Marc commented on 20 November 2005 @ 14:25

    Would it be possible to have a list of the recensed bugs with the method to fix it ?

  79. 79/108

    The Man in Blue commented on 20 November 2005 @ 22:20

     There aren't any bugs except the ones you create. If you can show me bugs in the examples, then those are bugs I'll worry about.

  80. 80/108

    Jo commented on 21 November 2005 @ 07:18

    In a previous post I tried to solve a IE5.x bug that prevents the icons to be CLICKABLE in Cameron's footerStickAlt.


    This is due to the hasLayout  issues, read on.

    If need to support IE5.x to make the lists fully clickable. Just add height: 0 to each (and remove the comment hack), an example:

    #contentSub .featuresMenu li#featuresAttachments
    {   height:0;
        background-image: url(../images/features_icon_small_attachments.gif);

    }

    Note: Cameron makes in this example extensive use of negative margins to keep the floated regions from dropping.

  81. 81/108

    The Man in Blue commented on 21 November 2005 @ 14:40

    Jo: who really cares? The example is about styling the footer, not about making clickable icons.

  82. 82/108

    Evan commented on 23 November 2005 @ 17:26

    Jo: good tip! Thanks!

  83. 83/108

    Mike Lane commented on 24 November 2005 @ 05:36

    Trying this post once again...

    Cameron, you mentioned that if we showed you bugs in the examples, then those would be the ones you worried about.  Okay, try this page in firefox...

    http://www.cleverfishmedia.com/testcss/ortemptest.html

    You'll obviously notice that the footer sits at the bottom of the viewport not the bottom of the content.  This appears to be because the body allows the content to flow beyond its borders instead of resizing with the content in firefox.  Have you any workarounds for this?

  84. 84/108

    The Man in Blue commented on 24 November 2005 @ 04:34

    Mike, when I say examples, I mean my examples.

    I have neither the time nor the inclination to look through other people's code and decipher what's going on.

  85. 85/108

    Trinity commented on 26 November 2005 @ 04:49

    Are your code example free of us also for commercial work? 

  86. 86/108

    The Man in Blue commented on 26 November 2005 @ 05:04

    Yep, the code is, not any design though. 

  87. 87/108

    Mike Lane commented on 26 November 2005 @ 05:43

    Well okay then.  lol

  88. 88/108

    rbirdman commented on 1 December 2005 @ 20:02

    This is excellent work MiB.


    I struggled to apply it to an existing design and it was Firefox giving the most problems. I think the main problem was the way I was floating the navigation to the side.  Applying it to a new design, I suspect, will be less problematic.

  89. 89/108

    Damian D commented on 2 December 2005 @ 19:56

    Firefox 1.07 here.


    I had two issues.

    1. When the text was under a page, the scroll bar still showed. I resolved that by making the body height declaration to 95%.


    2. I struggled with Firefox overlappig the non-footer and the footer. To resolve it I put a margin-bottom on the non-footer.

    Thanks heaps.

    Damian. 

  90. 90/108

    Laurie commented on 5 December 2005 @ 14:55

    I'm having similar problems to Damian; 1 is due to the margin/padding of the page and can be resolved with these tweaks to the html and body rules:

    html { height: 100%; margin: 0; padding: 0; }
    body { height: 100%; margin: 0; padding: 0; }
     
    [btw, is there any reason they're two seperate rules, rather than just using a 'html, body' selector?]

    I'm still struggling with 2, though; if I add margin or padding to the bottom of nonFooter, it pushes the footer off the bottom of the window again for short content.

    My test page is exactly as simple as the HTML in the original post, except I included dummy content in the two divs, so it seems both these problems are short-comings of the solution as described. (And yes, I'm using 'position: relative' in the footer, per the update.)

    Nice work, though, Cameron, I came across your post in the short interval between realising I wanted to do this and getting around to trying to figure out how: just-in-time guru-ing at it's best ;-)

  91. 91/108

    Peter commented on 6 December 2005 @ 03:44

    Nice method!

    What about the IE negative margin bug using a background repeat-y in the content?

    I'm having this issue right now.

    Thanks.

  92. 92/108

    Darryl commented on 6 December 2005 @ 06:37

    I am so close to getting this to work 100%, but I am having the issue with short content, has anyone else had this issue and found a resolve?


    example working with long content
    http://www.greenhornranch.com/newsite/index.html

    example working with short content
    http://www.greenhornranch.com/newsite/birthdays.html

    Thanks!

  93. 93/108

    Darryl commented on 6 December 2005 @ 11:13

     Please ignore my last posts, it was the way I had my divs setup.

  94. 94/108

    siyocks commented on 15 December 2005 @ 20:07

    Thank you, it works fine for most browser. I wonder why my footer still raising up a little bit using Konqueror browser, but <a href="http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm">you example</a> is perfect even using Konqueror.

  95. 95/108

    Scott commented on 18 December 2005 @ 06:38

    Hi,

    I've been trying to get the footer to work (as well as solve other problems, but right now I'm just concerned about the footer), but it doesn't seem to do what it's supposed to.

    If someone could go through the html and css at http://www.cybotshq.com/css.html and try to figure out why, I'd really appreciate it.

    Thanks

  96. 96/108

    bill t commented on 5 January 2006 @ 10:48

    In Firefox, wrapping a FORM tag that surrounds the "footerStickAlt" markup needs 'height:100%'.

    Not intuitive -- not yet mentioned -- useful for ASP.NET developers.

  97. 97/108

    Brendan S commented on 10 January 2006 @ 15:02

    Hi,

    I'm not understanding this explanation... do I add these in addition to the styling from FooterStick(regular)? I'm trying to apply this to www.strombie.com, but I'm having trouble. Can someone give me some advice? Thanks!

  98. 98/108

    Teaman commented on 23 January 2006 @ 16:10

     All examples and explanations don't talk about a header.  I have tried to implement this on a page with a header section and I have to scroll down the page to see the footer.  Once there, I can grow/shrink the page and the footer sticks to the bottom of the window but the scroll bar indicates the page is scrolled down.  If I scroll up to see the header, the footer dissappears out of view.  Changing the negative footer top margin doesn't solve the problem but does shift the footer relative to the bottom of the nonfooter content.

  99. 99/108

    RD2 commented on 29 January 2006 @ 15:18

    slightly off-topic:

    In this RP footer with a negative topmargin:

    How can you determine the

    offsetHeight, clientHeight, scrollHeight

    According to my tests it gives the height of the footer. Seems impossible.





  100. 100/108

    Short circuit commented on 30 January 2006 @ 04:03

    Will this efect the lay-out anyhow since we have the parent container which is relative and the child is an AP div?

    CSS

    #footer  {
    position: relative;
    margin: -7.5em auto 0 auto;
    }
    * html #footer {
     margin-top: -7.4em;
     }
    #subfooter {
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 7.5em;
    }

    * html #subfooter {
    bottom: -1px;
    }

    HTML

    <div id="footer">
        <div id="subfooter">
        </div>
    </div>

  101. 101/108

    Short Circuit commented on 30 January 2006 @ 04:28

    edit:added (see comment #100):

    Are these styles equivalent:

    #footerRP  {
    position: relative;
    margin-top: -7.5em;
    }

    #footerAP {
      position: absolute;
      bottom: -7.5em
      height:7.5em;
    }



  102. 102/108

    Jeroen Swets commented on 2 February 2006 @ 08:52

    Will there be a sollution for IE7?

    Beta2 is out at the moment and it does not handle it as it should :)

  103. 103/108

    The Man in Blue commented on 2 February 2006 @ 10:03

    I'll worry about it when it's not beta.

  104. 104/108

    Jeroen Swets commented on 3 February 2006 @ 01:00

     I understand it's a beta, but it seems CSS implementation is more or less 'finished'.

  105. 105/108

    Mike commented on 3 February 2006 @ 08:01

    The reason the beta was released is so we as web designers and developers can fix these type of problems before IE7 is released to the masses.  It would be very beneficial to those that used your code if you could help us make this work in IE 7.

  106. 106/108

    The Man in Blue commented on 4 February 2006 @ 02:55

    If you can tell me how to install IE7 beta without overwriting my existing versions then I might have a look.

  107. 107/108

    The Man in Blue commented on 5 February 2006 @ 15:12

    Actually, forget that, I don't have Windows XP.

  108. 108/108

    VillagePine commented on 8 February 2006 @ 07:23

    Dude, you 'da man ("in blue")!  I have been googling all over for this CSS "fix" regarding footers.  Thanks. 

  109. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed