Footer Issues : Can't Keep it Down

I have been trying for 2 hours to get my footer to stay at the bottom.

I have been trying "Matthew James Taylors" technique, but no luck.

Anyone see what I am missing or doing wrong?

Here is a Live Example : http://glustik.com/essex/index.html

Any help would be GREAT!

I would attached the CSS Code with the { } but it always br开发者_如何学Goeaks for me.

I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.

Here are some things that are most likely giving you trouble:

• Duplicate id values (as mentioned)
• Unnecessary absolute positioning
• Hard-coded height values on several divs
• Unnecessary use of "clearfix" divs
• Overuse of negative margins to compensate for padding on other elements (always problematic)
• Minor but relevant: use of classes like floatRight, just as bad as using inline styles.

I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.

Best of luck!

EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:

• Remove the height and bottom padding from #mainBody

(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.

You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.

try moving it out of #container, or remove the relative positioning from #container

Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.

You have three options:

1. you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
2. or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
3. or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to @Gaby aka G. Petrioli for pointing this out.

I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)

If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.

You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:

http://compass-style.org/reference/compass/layout/sticky_footer/

Make the following changes and it rendered fine in Chrome for me:

• remove bottom:0; from #footer
• change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)