sticky footer using css Sticky Footer using CSS
Want to make your page footer stay in your browser with 100% width on header and footer in HTML5?

See my live example in Rackguard website, developed with HTML5.
Here is the structure of sticky footer in html...

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html dir="ltr" lang="en-US" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="ltr" lang="en-US"> <!--<![endif]-->

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>sticky footer in css</title>
</head>

<body>
<div id="wrap"> <!-- this is wrapper of your whole structure -->
<div id="container"><!-- This is wrapper of header and content-->
  <header>
	<div id="insidehead">
          logo and header in here
	<nav> <! your navigation section --> </nav>
	</div>
  </header>
  <div role="main" class="insidecontent">
		this is your content
  </div>
  </div><!--end Container-->
<div class="clear"></div>
  <footer class="clearfix"><!-- this is your footer -->
	<div id="insidefoot">
           Footer goes here
	</div>
  </footer>
 </div><!--end Wrap-->
</body>

In order to make stay in bottom and not collapsing, you should put a fixed width in footer
Here the CSS with description in comment.

html, body{ height:100%; }

.clear { clear: both; }
#wrap{ /* THIS is the IMPORTANT part. this will make sure your footer will not close the main content when zooming in*/
	position:relative;
	min-height:100%;
	width:100%;
}

header {
	height: 200px;
	background: aqua; /* put your repeated header background */
}

#insidehead {
	width: 780px;
	height: 200px;
	margin: 0 auto;
	padding: 0 90px;
	background: red; /* put your fixed content header background */
}

.insidecontent {
	position: relative;
	clear: both;
	display: block;
	height: 100%;
	margin: 0 auto;
	width: 780px;
	padding: 0 90px 200px 90px;
        /*200px padding is giving the space for your footer. make sure it's the same as footer height so it will not overlapping your content*/
}

footer{
	min-height: 200px; /* this make the minimum is 200PX or bigger, rather than fixed width */
	font-size:0.8em;
	position: absolute;
	bottom: 0;
	clear: both;
	width:100%;
	background: blue;
	}

#insidefoot{
	display:block;
	width:780px;
	height: 200px;
	margin: 0 auto;
	padding: 0 90px;
	background: grey;
}
cc 468x60 v1 Sticky Footer using CSS