Footer at bottom of browser

Can't make my footer to always appear at the bottom

[zyph]

Hi,

I have a 50px heigh footer, that I want to have at the very bottom of the browser window, always.

If i take

position: abosolute; bottom: 0;

it doesn't work as soon as my content goes over 1 screen height.

If I just let it flow after, (my

#mainContent

is min 100%; always), it appears alright, but when there isnt much content, it is placed at the 50px right outside of the top screen height.

Then I add

margin-top: -50px;

and

padding-bottom: 55px;

to my

#mainContent

.

That works when theres alot of content, but not when theres little cause the padding pushes the footer out of view.

That's complicated, but here's some code:

#mainContent {
 background-color: #F9F5EB;
 border-left: 5px solid #DDD7B6;
 border-right: 5px solid #DDD7B6;
 margin: 0;
 margin-left: auto;
 margin-right: auto;
 padding: 0;
 text-align: left;
 width: 700px;
 min-height: 100%; /* For everyone else */
}
#footer {
 padding: 0;
 margin: 0;
 margin-left: auto;
 margin-right: auto;
 background-image: url('gfx/footer2.jpg');
 background-repeat: no-repeat;
 height: 50px;
 width: 700px;
 position: absolute;
 bottom: 0;
}

[createErrorMsg]

This question pops up about once or twice a week (this an the "100% height" question). I'm not sure that there has ever been a really satifactory answer posted, but I suggest you use the 'site search' feature and read through some of those old posts.

[zyph]

Yeah, I can imagine. But I actually DID search the site here, before posting, but I didn't quite find anything.

I will try once again, but please write if someone has a link or something ;)

Thanks