I have the following page:

• http://www.mattpealing.co.uk/concept/chm/

and am trying to position the footer so that it is always at the bottom of the page with:

#footer {
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #db921a; }

However it only seems to be aligning with the bottom of the page, not the browser as such (see attached image).

Does anyone know what I might be missing?

Is HTML's height set to 100%? Try this code:

html{background:#00ff00;}body{background:#0000ff;}

You should not see any white. There should be a red page with blue down to where you footer approximately is.

Thanks, that works okay in that situation. But when more content is added to the page the footer does not seem to go to the bottom of the page.

See in the attached image how the text seems to overlap the footer?

You need to set min-height to html and body.

min-height: 100%;

Also, another tip. Place a div at the bottom of your wrapper, lets call it "push", to push your content up a bit so that it doesn't slip underneath the footer. Make it the same height as your footer, i.e.:

Like this:

<div id="wrapper">
   Your code as before...

   <div id="push"></div>
</div>
<div id="footer">
   Your footer...
</div>

#footer { height: 50px; }
#push { height: 50px; clear: both; }

Hmmm I've set

html, body {
    height: 100%;
}

However the body only extends to the fold, not the page as such.

See the attached image, I've made the body green and the html red. This is when testing at 1280 x 768, it appears fine at lager resolutions.

Does anyone have any ideas?

Does anyone have any ideas?

Nope, can't debug a picture.

Oops, forgot to upload the latest code sorry.

I managed to get around it with this in the end though, quite handy

http://www.cssstickyfooter.com/

Hmmm or maybe I didn't solve it, now I need to scroll to the bottom of the page in order to see the footer:
http://www.mattpealing.co.uk/concept/chm/

In the documentation on http://www.cssstickyfooter.com it states:

must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser

…which I imagined to be my problem, however even after adding:

* {
    margin:0 !important;
}

to the top of my stylesheet it still did not resolve the issue, even though I'd eliminated all margins.

I'm a bit puzzled as I have also stuck to the other guides here:

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

Any help would be great!

If you're trying to absolutely position the footer at the bottom, then going by the code that's on this page...


The footer should be inside the min-height wrapper (in that page's case, the #wrapper div)

And the footer should have the following:

#footer {
position: absolute;
bottom: 0;
}

Then just clean the code up a bit by removing the #wrapper's top padding and the body's top border

The only 100% reliable way is to use a bit of javascript.

http://www.candsdesign.co.uk/article...sticky-footer/

Written for this thread


demo page

Wow I had no idea there was so much work involved simply creating a sticky footer!

My client has decided it is no longer necessary so I haven't worked on getting it to stick to the bottom any more.

Thanks for the tips anyway, looks like I'll be giving JavaScript a shot next time.

A really fixed footer isn't difficult. For a tutorial, surf to website-laten-maken-amsterdam-nh.nl. (Just make it into a link, because I cannot post any links here yet.)

Here's some thought on the topic
http://webmaster-talk.eu/?topic=445.0

Thanks Chris, the direct link to the tutorial in question is mentioned in that forum thread. (The nickname FrankC was taken here.)

Ok so I'm preaching to the converted then

Yep. Amen