CSS Sticky Footer Layout

Oct 20 2009

Here is a solution for Sticky Footer Layout. It applies a clear fix hack to keep the footer in place in Chrome and other browsers where the footer would float up when you resized the window. This hack fixes the problems that might occur if we are using floats to create two or three column layouts.

The Sticky Footer Layout posted here is from css sticky footer, A List Apart, Cameron Adams and, lwis.net.

Here is the basic structure of HTML code.

You’ll notice how the footer div is outside of the wrap div and header is placed inside the wrap but above the main. If you wanted to place any elements outside wrap or footer then we have to use absolute positioning for particular element else it messes up the 100% height calculations.

Here is the CSS code

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}

we are not done just yet.

We need to add the clearfix properties to the main div to get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and sidebar to the other.

Here is the clearfix code

.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

When coding sites for ASP.net where each page is inside a form tag, make sure to add the form tag to the height:100% statement.