I'm trying to make a simple footer for my site with this css:

#footer {
position: relative;
background: bottom left #eee;
clear: both;
width: 600px;
height: 20px;
text-align: center;
}

my problem is when i place the div in my site, how do i keep the footer always at the very bottom of the page. it keeps showing up at the bottom of where my text stops, but the page wrapper continues.

the site is http://www.caseymccallister.com and the css is http://www.caseymccallister.com/css/style.css

I've tried this out and I'm actually not having any luck. I am trying to develop a setup in css with similar qualities to the homepage of this website. There is a menu at top, content underneath that, an area of postings, and forum discussions below the content, and then finally, a footer.

http://www.estevancarlos.com/index_dev.html

I can't say i know how professionals go about this but I am still in stage of making drafts and trying to see if my idea is feasible and aesthetically appropriate. One the page above, the footer seems to work, on the page I am working on now in which I replace the flash with written content, the footer no longer functions.

I have a frame div:

#frame {
position: relative;
min-height: 100%;
}

It contains the organization for most of things. And the footer underneath that

.footer {
position: relative;
margin-top: -150px;

width: 100%;
background-image: url(images/footer_bg.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

Any advice is appreciated.

thanks for the responses. i didn't realize that this was such a difficult, but common problem. i guess it's good that it's common though. i'll try all the techniques and see which one works. thanks