CSS : Sticky footer , Footer at bottom

snippet.html

<!-- SINGLE COLUMN LAYOUT -->
<div id="wrap">
	<header id="header"></header>
	<section id="main"></section>
</div>
<footer id="footer"></footer>

<!-- MULTI COLUMN LAYOUT -->
<div id="wrap">
	<header id="header"></header>
	<section id="main">
		<div id="content"></div>
		<aside id="side"></aside>
	</section>
</div>
<footer id="footer"></footer>

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

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


<!-- KNOWN ISSUES

HEIGHTS AND MARGINS
Using top and bottom margins inside some elements may push your footer down by that margin height, perhaps in a header or the wrap or main <div>'s themselves. Instead use padding to create spacing inside the element. You'll notice this is happening if your page has little content so that the footer should be on the bottom but you see that your window scroll bar on the side indicates that it is sitting a bit below the window bottom. Go find the offending top or bottom margin and switch it to padding.
Be carefull with declaring padding on the main <div> in another part of your style sheet. If you were to add something like this; padding:0 10px 0 10px; you would end up overwriting the important bottom padding that is supposed to be the same as your footer height. This would cause your footer to start overlaping your content on your longer pages (in Google Chrome).
Watch out if you are using a border on your footer. If you add a 1px border to a 200px high footer, then you need to use 201px as your negative margin in in #footer and 201px as your padding bottom in #main to compensate for that extra 1pixel.

FONT SIZES
When setting font sizes in your style sheet, if you use relative sizing be aware that some viewers may have their monitor settings create bigger font sizes. In some elements, like in the footer itself, it could break the height settings and create a gap below the footer if there is not enough room left for the text to expand lower. So try using absolute sizing by using px instead of pt or em. Or simply leave plenty of room for text in your footer to expand.

.NET PLATFORMS
When coding sites for ASP.net where each page is inside a <form> tag, be sure to add the form tag to the height:100% statement, else it will break the sticky footer. Like this;
html, body, form, #wrap {height: 100%;}

-->