Footer isn't being pushed to the bottom

Question

I have this site: site

It's a bit much and the sliding sidebars are awful, I know, but believe me when I say these are all client specs.

I used this technique to sticky the footer down at the bottom. Another dev has been maintaining this site for the last few months and I, cannot, for the life of me, figure out why the footer isn't stickied anymore. It looks fine on typical 14" - 15" screens but when you view the site on a >= 24" monitor, the footer stays in the middle of the page.

I know this might be an isolated problem, but I just really need a new pair of eyes to check out the site.

PS. If you need me to post code, just tell me what you need. Thanks.

Answer 1

In your stylesheet, you've got:

html, body {
    height: auto;
}

Try changing that to:

html, body {
    height: 100%;
    position: relative;
}

Just adding the 100% height should fix it, the position relative will help secure things for if your code changes in the future, or you add other things that might depend on that.