Background aligning to bottom of browser window not content

It's driving me nuts.

[Legin]

I've spent over a day trying to solve this issue and although have solved most of the problems I'm still getting some.

It's an awkward design as it has a box with a header and footer that touch the top and bottom respectively and the content is centered with a margin either side.

In order to get the footer to stay at the bottom I've managed to get to stay in place using bottom: 0, but have had to set an margin with a minus value to the content above it so that it meets when there is not much content.

The page now scrolls as it should however the background, which is set to bottom seems to be fixed to the bottom of the browser window and not the content, so therefore does not align with the footer until you are completely scrolled all the way down.

You can see below that I have 2 backgrounds, 1 for the header and one for the footer, so have one set in its own div at the top. There are no absolute layers. It occurs in IE8, FF3.4 and Safari 4 but is fine in IE6 and IE7. I've included everything I think is relevant.

html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
overflow: auto;
}

body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #123e63;
background-color: #acc8e0;
background-image: url(images/bg-footer.gif);
background-repeat: repeat-x;
background-position: left bottom;
overflow: inherit;
}
.background {
width: 100%;
background-image: url(images/bg-header.gif);
background-repeat: repeat-x;
background-position: left top;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -81px;
}
.push {
height: 81px;
}

.footer {
bottom: 0px;
height: 81px;
width: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
overflow: auto;
background-image: url(images/footer-bg.gif);
background-repeat: repeat-x;
background-position: left bottom;
}

[Legin]

Any ideas on this?

[Legin]

Ok it seems that it was caused by the overflow: auto; in the html{}

Its taken a hell of a lot of time to work though out though. :(

[swa66]

Instead of negative margins, what I usually do:
- give the body (or the wrapper, whatever element you use to hold it all):
position:relative
an 2em bottom padding (to leave space for the footer to sit)
- the footer: position:absolute and and bottom:0

The main trick comes with where to add borders to it all so it doesn't become to big.

I'm overdue on an example I promised already ... will write it up soon.

[swa66]

Take a look at the example in [webmasterworld.com...] it probably explains what you seek.