Positioning footer at bottom of screen

[lisa232]

Hi All,

I am trying to position the footer div in my page to stay at the bottom of the screen when the content does not reach or exceed the height of the browser window. I am able to position it absolutely by adding:

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

However when there is scrollable content, the footer sticks on top of the text and scrolls with it (which I expected).

Can anyone tell me a way I can modify this so that the footer will always stay at the end of the text?

The layout im using is:

<div id="wrapper">
<div id="header"></div>
<div id="pagecontent"></div>
<div id="footer"></div>
</div>

Thanks

[drhowarddrfine]

Please see the example in this thread.