Make Footer Stick to the Page Bottom

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

http://blog.rajatpandit.com/2008/06/19/making-footer-stick-to-the-bottom-of-the-page/

==============================

The HTML code:

<div id=”container”>
<div id=”content”>
<p>Main content.</p>
</div>
</div>
<div id=”footer”>
<p>Footer content.</p>
</div>

The CSS:

html, body {

height:100%

}


#container {

position:relative;

height: 100%;

min-height:100%;

height: auto !important;  /* for IE6 as it doesnt understand min-height */

margin-bottom: -100px; /* assuming your footer height is 100px */

}


#footer {

position: relative;

height: 100px;

}

==============================
View example:
Advertisements
%d bloggers like this: