[SOLVED] CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.

I want the footer to

stick to the window bottom when the page is short and the screen is not filled, and
stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).

The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

Solution

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}