CSS Sticky Footer Problem

[robertallen]

Hi all,

I’m trying to get a CSS Sticky footer (cssstickyfooter.com) made, but I’m having problems with it.

It seems like it’s halfway working, but the footer seems to be longer at the bottom and not actually sticking to the bottom.

http://www.pearsonresource.com/about-us/

Here’s my CSS code…
html, body { height: 100%; }
#container {
margin: auto;
width: 960px;

min-height: 100%;

}
#subcontainer {
overflow:auto;
padding-bottom: 97px;
}
#footer-5, #footer-7, #footer-9, #footer-11, #footer-13, #footer-15, #footer-17 {
clear: both;
position: relative;
width: 100%;

margin-top: -97px; /* negative value of footer height */
height: 97px;
}

Pardon the amount of footers, they wanted a different color footer for each page. Also, pardon the tabs…I just wanted to tab the changes for the sticky footer parts in case I needed to take them out if they weren’t working.

[hotpink]

Edit: I understand what you mean now. The content in the footer extends the full width of the window, while the rest of the page is constrained to 960px.

This code should help.

.footer_content {
width: 960px;
margin: 0 auto;
}

[robertallen]

Hi Jurotek, good point on the footer id thing. I didn’t think of that.

I adjusted my code to the sticky footer link, but I’m still seeing the problem show up. I am stumped completely.

[robertallen]

Thank you hotpink…I forgot to center (margin auto) the content inside the footer.

Much appreciated.

Still I can’t figure out why it goes further down the page though. :(

[robertallen]

Yep, that’s the one I was going off of actually.

There is something not right elsewhere.

Obviously I renamed #wrap to #container, #main to #subcontainer…I’m set in my ways there…but, the code is all right in the CSS…and yet, it’s too far down the page.

I don’t get it :(

[hotpink]

As @jurotek pointed out, the use of a top margin on the header is causing the footer to be pushed down. A full rewrite would probably be a cleaner approach, however I think your current code can work.

Change from

#header {
margin-top: 30px;
}

To

#header {
padding-top: 30px;
}

Another source of extra spacing is the #footer { margin-top }

The footer height is set to 97px, however there is a 7px border applied to the top. So the computed height is 104px.

Change from

#footer {
…
margin-top: -97px;
…
}

To

#footer {
…
margin-top: -104px;
…
}

[jurotek]

@hotpink,

> Another source of extra spacing is the #footer { margin-top }

good catch, I wasn’t too thorough

[Author]

Posts