Positioning the footer at bottom

There is a container that houses a footer, below two columns.
All are within a single container.

How can the footer-container be forced to the page bottom?

It keeps crawling up, particularly with IE7.

Really don’t want to palce it outside the large container.

.footer-container {
clear:both;
background:#666;
float:left;
width:100%;
height:50px;
border-top:3px solid #E9E9E9;
font-size: 12px; 
font-weight: 500;  
font-family: Arial, Helvetica, sans-serif;
}

This is the only reliable way to put a footer at the bottom of the viewport:

It’s not really a natural feature of page layout, so requires some trickery.

ralph.m

Thanks.

Given the trickery, am wondering if I should list the footer separate.
Since it has no side/bottom borders and is same color as the rest of the outer background, it might actually make sense here.

Yeah, I prefer the footer to site naturally at the bottom of the content, wherever that is on the page.