Positioning an element at the bottom of a page

[pealo86]

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?

 

[attachment deleted by admin]

[pealo86]

Also, 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?

 

[attachment deleted by admin]

[pealo86]

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

 

http://www.cssstickyfooter.com/