The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

If you have a small amount of content the footer will sit at the bottom of the viewport. If you then resize the window smaller the footer will still stay at the bottom of the viewport until such time as it meets any content and then it stops going up just like a normal layout would.

If you have a large amount of content then the footer is pushed below the fold and sits under all your content.

The footer should never overlap the content and is the reason that a "sticky footer" needs to be a fixed height so that you can account for the fact that it will overlap unless you do something to stop it

If you are still not sure then just test out the code I gave above in IE6/7 Firefox and see how it behaves with and without content when you resize the screen etc.

If you have a fluid width footer containing fluid content then there obviously would be a point where the text will spill out of the height when the window is squeezed smaller.

This is why fixed footers are best for a small coyright message, logo or a couple of small links. They are not suitable for lots of content in a fluid design. In a fixed width you can obviously cater for it much better and have more content as the height won't change.

Hope that clears it up

That clears it up for me. Thanks a ton. *goes back to the drawing board*

I prefer the social approach to the solution. Let's discuss it with Simon after work today.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

I have had a number of entries that have tried using absolute positioning for the footer and while these appears to work for ie8 (not opera 10 though) you should read the FAQ on footers for why this is not a good idea.

If you have dynamic content such as a hide and show in the content which is enough to push the footer down then the footer gets misplaced as IE 6/7 forget where it is placed. I documented this behaviour in the FAQ on footers a long time ago and the reason I advise against using absolute positioning for this technique.

Also note that you should test Opera 10 as that is the latest version and some footers work ion Opera 9+ but not in 10.

that all the methods I have received so far fail at some stage and in one browser or another.

what??
where does mine fail?

edit:
oh yes, it fails a lot when the width changes, i seem to have forgotten to test the width too.

ill just add a little logo, "works best in firefox" and be done with it xD

edit2:
right now im kinda loaded with work, so i don't have the will to work overtime on this, would love to see the final version that doesn't break in anything, preferably SIMPLIFIED to the bare minimum.

Another week over and another quiz bites the dust. Thanks to all that have contributed, watched and taken part.

I should point out right at the start that I don't think that "sticky footers" are always a good idea but they are commonly asked for so we do need a solution and it also makes for a good quiz.

There are a number of ways to solve the puzzle and the eagle eyed among you spotted that my old demo from 2003 is actually working in all modern versions of opera and in IE8 also.

The reason that this version is working when all other sticky footers fail was because of the inclusion of a minHeight hack that was used for old versions of Safari (back in 2002/3). This was simply a 0px width 100&#37; high float that holds the page open to an initial 100% height.

While this method fixed old Safari's lack of min-height it also had the benefit of fixing Opera's bad re-draw when the viewport was moved in a vertical direction. The same hack also fixes IE8 which was suffering from the same problem as opera.

A couple of you managed to make this connection and used it in your answers so well spotted.

The downside of this method is the extra div needed and the fact that you would need to contain any other content inside a parent float or any elements with clear applied would drop below the 100% high minheight float hack. However as far as Opera goes this is the only reliable solution to date that works smoothly and as expected without fault.

There are a number of other solutions for IE8 and the simplest would be to set the outer to display:table and use height:100% which fixes the issue straight away. However the code would need to be given to ie8 only because of a long standing gecko bug that causes redraw problems unless you also include extra elements that have been set to display:table-row and display:table-cell.

There is a another fix for IE8 and that is to use a 1% height on an inner wrapper and because the parent is a min-height the height:1% should resolve to height:auto but for some unknown reason it also fixes the ie8 problem (sounds almost like ie8 has something like "haslayout" although this has been removed in ie8 apparently).

Another solution was to use the absolutely positioned footer method but this also suffers from a nasty bug in ie6/7 where dynamic content is used and the footer is misplaced after content is revealed or hidden. Therefore in most instances I recommend not using the absolute method unless you are sure you won't be loading dynamic data into it.

The downside is the extra 2 elements needed to create this effect. If you weren't worried about Opera we could lose the 2 extra divs and give ie8 (alone) display:table and be done with it.
Winners:

I had some more or less correct entries from a few of you but there was always a slight problem in one browser or another depending on the scenario.

Therfore for persistence and the fact that the final version uses less divs than my original the winner this week is Maleika (Kohoutec). She managed to use the before: pseudo element to place the 100% high float and therefore save an unnecessary div in the mark up. Well done maleika

Special mention to Gary Turner who came up with the display:table solution and managed to get it working (to a degree) in some opera versions.

Also thanks to Yurikolovsky and Ryan who both came up with solutions although they were heavily based on my original

Well done to all who took part.

I'm not going to post all the solutions because I had multiple entries but I will post a few to give you the flavour.

Yuriklovsky - heavily based on my original but failed to take into account the clearing of floats in the content section. Works in opera and ie8 but the float clearing problem needs to be addressed. IE6 and 7 will drop the whole page if the window is made smaller (float clearing again)).

It may have seemed simple at the start but there are a lot of things to take into consideration. If you want to use a sticky footer method then you should think carefully whether you need the extra mark up and complexity in your layout.

Thanks for listening and see you next week with another light hearted quiz

Thanks, Paul. And thanks so much for this quiz. You've no idea how much these quizzes help me (challenging) and, eventhough I know how much time and effort (and nerves) it takes for you to do these quizzes, I'll say that I'm really looking forward to the next one, as egotistical as that sounds.

display:table was the second thing i did, but because it only worked in ie8, and not in opera, i dropped the idea.

overall i had 2 solutions for ie8, and only one solution that worked in ie8 and opera (thanks to your demo paul xD)

@kohoutek
genius!!
why didn't i think of putting generated content with a 100&#37; height
this is only a "modern" browser issue

i guess i got too mixed up in fixing old browser bugs (from previous quizzes) that i didn't even think about css3 features

p.s. your solution is very pretty :3

@paul
thanks again for a excellent quiz, this one was very different for me from the other quizzes, well first because for once i tried but never did solve it to the fullest (had serious work scheduling problems) second that i just used your trick instead of sending you floods of thoughts and solutions. xD

i really love the explanation on this one. i have never used sticky footers before so all of this is really really informative. (and better written than the previous explanations, for previous quizzes)

and thanks for the final "all working" solution, too bad there is no best solution yet, aka yours + kohoutek's solution combined! xD