View Full Version : Sticky Footer Issues

01-10-2010, 11:13 PM

I found this tutorial when searching the forum ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) but I have been unable to get it work on my site. It doesn't seem to be expanding the "main" div into the full right regardless of content. Heck, even reading about this I think I may have the wrong tutorial for what I want to do.

This is the intended outcome (ignore the links for now, I will add those once this problem is fixed :P) http://www.tronet.ca/site.gif But this is what that tutorial gives me when I try it: http://www.tronet.ca/index2.html

Is sticky footer the right term or am I looking up the wrong thing? I just want the footer to be at the bottom of the page (not the view) regardless of the amount of content.


01-11-2010, 02:13 AM
Hello Comprox,
The whole secret to the ryanfait method is the #push and the placement of the #footer. You have the push right, you just need to move the footer.

Try it like this -
<div id="page">
<div id="header"> Head <img src="images/logo.jpg" class="floatright">

<div id="main"> Main Content Column

<div id="push"></div>

<div id="footer"> Footer
You'll need to add margin: 0 auto; to your footer then to center it.

I have an even simpler method here (http://nopeople.com/CSS/full-height-layout/index.html).

01-11-2010, 05:06 AM
Ok, that helped a bit but it was still not working. I played with it a bit and decided to try your method but it's having the same issue. It's being pushed too far down the page still on http://www.tronet.ca/index2.html ? (using the latest Firefox)

01-11-2010, 07:07 AM
Now your mixing the two techniques. Neither is going to work that way.
Choose one method and match your code line by line (both markup and CSS) till you get it working. It doesn't even matter which one you choose, I believe both work very reliably in all browers.
I only linked you to my example because it's very simple - some people seem to have trouble with the mechanics of the #push div in the ryanfait layout. My example does not use the #push div.

01-12-2010, 06:44 AM
Ok, as far as I can tell it should only be following your design now. It's close but the background of the main content area does not go down far enough sadly.


01-12-2010, 08:33 AM

#page {
background:#1F1D1E url(images/contentbg.jpg) repeat scroll 0 254px;
border-color:-moz-use-text-color #FDB515;
border-style:none solid;
border-width:0 2px;
margin:0 auto -87px;

#main {
margin:0 auto;
padding:0 0 87px;

01-12-2010, 06:11 PM
Good morning Comprox,
Good job on the layout, it's looking and working much better. The validator does find a couple errors (http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.tronet.ca%2findex2.html) though.

It's close but the background of the main content area does not go down far enough sadly.
You're still thinking of it like a normal layout and it's not. #main will come in handy for padding your text but the only way you can make it fill the space between your header and footer is by putting content in it.
#page is already full height though.
Moving that contentbg.jpg to#page, positioning it down below your #header, then leave #main with no color - That's what ab has shown you in his post below.
The only thing I would change there is the padding on #main, something like padding: 10px 10px 87px; instead.