CSS Sticky Footer sticks your footer to the bottom of the page

By Adham

• Tweet

There are many ways to keep your footer stuck to the bottom of the page, but the cleanest and most well tested method I have come across is CSS Sticky Footer. It’s very simple to implement, uses semantic code and has been tested in over 50 browsers. Keep your footer at the bottom of the page with CSS Sticky Footer.

The HTML

You’ll need to structure your webpage in the following way in order for the Sticky Footer technique to work. You basically have a wrap that wraps around your whole page except your footer. The footer div needs to sit outside the wrap by itself as you can see below.

<div id="wrap">

	<div id="header">

	</div>

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

The CSS

This small snippet of CSS will keep your footer at the bottom of the page but you’ll need to make a few tweaks to the code. You need to make sure that you set the height of your footer and then edit the top margin of your footer and also the bottom padding of your main div. These values should all be the same as your footer height as you can see in the below example.

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	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;}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

You’ll also need to add the following conditional styles in your web page head to fix some IE issues. This will effects all IE’s except for IE7.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

Useful tips

Try to avoid using vertical margins for elements inside your wrap div and instead use padding as it could affect the height of your wrap and thus cause your footer to move down the page. Also be careful not to overwrite any of the Sticky Footer styles in your own CSS as it could cause issues with the Sticky Footer. Learn more about this great little code snippet at CSS Sticky Footer.