Keeping Footer at bottom of page, but not to overlap content

problems when screen is too small

[absceo]

I saw two posts regarding keeping a footer at the bottom:

[webmasterworld.com...]
[webmasterworld.com...]

AND I am having similar problems, BUT mine is slightly different.

The site is <snip>

1) I want my footer (the red bar) to stay at the bottom of the page.

HOWEVER

2) When the screen is too small, I want it to be able to be "scrolled down" to, as opposed to displaying itself behind the content.

(so if originally there was enough space, and i made the browser window smaller, rather then going behind the content, i want the page to create an overflow.)

I am currently using "bottom;0" in my CSS to make it stay at the bottom

Please shed some light on how i can do this

Kind regards

[edited by: swa66 at 2:04 pm (utc) on April 7, 2009]
[edit reason] NO personal URLs see ToS [/edit]

[JAB Creations]

XHTML

<div id="body"><p>body</p></div>
<div id="bottom"><p>bottom</p></div>

CSS

#body
{
border: #000 solid 1px;
bottom: 120px;
left: 4px;
position: absolute;
right: 4px;
top: 4px;
}
#bottom
{
bottom: 0px;
left: 0px;
position: absolute;
right: 0px;
}

...you may or may not have to set the #bottom to have a width of 100%; and remember to use a child divisible element with margin to add "padding" to the #bottom if you decide it's more aesthetic.

- John