CSS Sticky Footer is a simple method consisting of only CSS and HTML that keeps your footer stuck to the bottom of the page. It is cross browser friendly and takes only minutes to implement on your website. Let’s have a look at how it works and how to implement it on our website.

How Sticky Footer Works

The HTML Code

Below is an example of a basic website structure which contains a header across the top of the page, a main content area on the left, a sidebar on the right and a footer across the bottom of the page. You will need the “wrap”, “main” and “footer” div elements present in your website.

<div id="wrap">
    <div id="header">
        Your header goes here
    </div>
    <div id="main" class="clearfix">
        <div id="content">Your content goes here</div>
        <div id="sidebar">Your sidebar goes here</div>
    </div>
</div>

<div id="footer">
    Your footer goes here
</div>

The CSS Code

Below is the CSS that will make your footer stick to the bottom of the page along with the “clearfix” hack which will fix other floating layout issues. Simply add this CSS to your stylesheet and make sure that the three instances of the footer height below are all the same.

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;}

.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 */

For further details please refer to the CSS Sticky Footer website. Here is another great method to keep your footer at the bottom of the page.

Related posts:

1. How to create clickable links in sIFR3
2. Create a custom twitter background the right way
3. Exclude a category from your WordPress index page