HTML: Sticky footer

If the footer is not sticky you are probable using floated elements within the wrapper element, try to add to following code to endding tag of the floating elements:

  <div class="clear"></div>
* {
  margin: 0;
}
 
html, body {
  height: 100%;
}
 
#wrapper {
	width: 900px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -55px;
}
 
.clear {
	clear: both;
	height: 0px;
	width: 0px;
	border: none;	
	display: block;
}
 
#push {
	height: 55px;	
}
 
#footer{
	width: 900px;
	height: 15px;
	margin: 0 auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Sticky footer</title>
</head>
<body>
<html>    
  <div id="wrapper">
    Content
    <div id="push"></div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>

Leave a Reply