Problem keeping the footer to the bottom of a dynamic page

Hi,
I am creating a site for which i have created the header and footer in separate files to be included in all the pages. the problem is that the content of the page will be dynamically generated and so it wont have a fixed length.
I want the footer to appear at the end of the content, which happens, but when the content is too less and fits within the browsers visible space, i want the footer to appear at the bottom of the page and not immediately after the end of content.
then i added the following code to the footer.css file to keep it at the bottom

#footer
{
text-align:center;
font: 11px "Courier New", monospace;
clear:both;
position:absolute;
bottom:1em;
width:98%
}


but now it remains fixed at tha position and the extra dynamic content flows past it.
How to get what i want:(

SOMEONE PLZ HELP

http://ryanfait.com/sticky-footer/

Try this

Frank

And these:-

What happens when you remove the higlighted:

#footer
{
text-align:center;
font: 11px "Courier New", monospace;
clear:both;
position:absolute;
bottom:1em;
width:98%
}


If nothing works, provide us a link, if none bringing up the code will also help :)


Frank, sorry. You're much quicker :)

thanx effpeetee and rangana for your immediate replis.

i tried the sticky-footer code but i guess, since i have positions in the body part it becoms a little messy. i am yet to try the other links & will surely do.

removing the highlighted code puts the footer back on top after the previously positioned content

Hey guys, i think i almost got the sticky-footer working
Thanks a lot :thumbsup: