CSS make footer go to bottom of page, minimum height

Question

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

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.

Answer 1

This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

Answer 2

There is an excellent footer tutorial at

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

The demo page is here:

http://www.lwis.net/profile/CSS/sticky-footer.html

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

Answer 3

Thanks, cool result!