HTML5 centered CSS layout with a sticky page footer

Update: This post is way out of date now – do yourself a favour and look into using something like twitter bootstrap

A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML5 Document with a sticky footer</title>
	<style>@import "css/reset.css"; </style>
	<style>@import "css/main.css"; </style>
  </head>
  <body>
	<div id="root">
		<header>
			The page header
		</header>
		<section>
			 <h1>Example</h1>
			<p>This is an example HTML document.</p>
			<p>Put your content here</p>
		</section>
 
	</div>
   <footer>
		Sticky footer
	</footer>
  </body>
</html>
html {
	background: #CCC;
	height: 100%;
}
 
body {
	background: #FFF;
	width: 600px;
	margin: 0 auto;
	height: 100%;
 
}
 
body > div#root {
	height: auto;
	min-height: 100%;
}
 
div#root {
	height: 100%;
}
 
header {
	background: #EFF;
	display: block;
	height: 100px;
}
 
footer {
	background: #FEF;
	display: block;
	height: 100px;           /* set the footer height */
	margin-top: -100px;      /* match footer height */
}
 
section {
	background: #FFE;
	display: block;
	padding-bottom: 100px;   /* match footer height */
}

Note i have also imported my reset CSS.

If you want a header and footer background image to stretch across the page, consider using CSS3 multiple background images. Otherwise you will need to create and inner wrapper for each section.

4 thoughts on “HTML5 centered CSS layout with a sticky page footer

  1. Awesome.

    I’ve been using Steve Hatchers solution, but I always seem to get irresolvable layout bugs with Steves code when using an HTML5 doctype.

    Thanks

  2. I tried copying your files and the middle section won’t strech down all the way to the bottom neither in Firefox4 or in Chrome 11. Also why do you use xmlns=”http://www.w3.org/1999/xhtml for a html5 page. Doesn’t that tell the browser it’s xhtml?

  3. I lost those links some time ago…. and this post is now way out of date. Do yourself a favour and look into bootstrap or something similar.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>