Pin my footer to the bottom of the page?

I am sure this is an easy fix, but something I have never encountered before. If you click the link below, you will notice the footer floats about 1/3 of the way up the page when there isn’t enough content in the body. I could do a min-height on the ‘content’ div, but obviously with different screen resolutions it will show differently.

Any tips?


Read the sticky footer entry in the CSS faq (see my sig) as it explains how to do this in detail. Once you’ve read it and tried it then just shout if you are still stuck. You do need to follow carefully and be exact with your dimensions.

Sticky footers are best suited to small footers that don’t hold much content as they need to be a fixed height.