robfletcher/layout.html

## layout.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Centered column with fixed footer</title>
	<meta name="author" content="Rob Fletcher">

	<style>

		/* Sticky footer: http://www.cssstickyfooter.com/ */

		* {
			margin: 0;
		}

		html, body {
			height: 100%;
		}

		#container {
			min-height: 100%;
		}

		.ie6 #container, .ie8 #container {
			display: table;
			height: 100%;
		}

		#main {
			padding: 1em 1em 6em;
		}

		footer {
			margin-top: -5em;
			height: 3em;
			clear: both;
		}

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

		/* gradient filled background with central full-height column */

		html {
			background-color: #999999;
			background-image: -moz-linear-gradient(top, #999999, #ffffff);
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #999999),color-stop(1, #ffffff));
			background-image: -webkit-linear-gradient(#999999, #ffffff);
			background-image: linear-gradient(top, #999999, #ffffff);
			          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#ffffff');
			background-repeat: no-repeat;
		}

		body {
			background: #fff;
			margin: 0 auto;
			max-width: 960px;
		}

		.ie6 body {
			width: 960px; /* ie6 doesn't understand max-width */
		}

		header, footer, nav {
			display: block;
			padding: 1em;
		}

		header, footer {
			background: #191970;
			color: #fff;
		}

		nav {
			background: #3D59AB;
			color: #fff;
			zoom: 1;
		}

		nav ul {
			overflow: hidden;
			padding: 0;
		}

		nav li {
			float: left;
			list-style: none;
			margin-right: 1em;
		}

		nav a {
			color: #ffffff;
		}

		p {
			margin-top: 1em;
		}

		/* shadow edging for the central column */

		body {
		     -moz-box-shadow: 0 -0.5em 0.5em rgba(0, 0, 0, 0.8);
		  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
		          box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
		}

		@media screen and (max-width: 960px) {
			/* don't render the shadow if the viewport is too narrow otherwise it forces a horizontal scrollbar */
			body {
			     -moz-box-shadow: none;
			  -webkit-box-shadow: none;
			          box-shadow: none;
			}
		}

		/* decent font stack */

		body {
			font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
			font-weight: 300;
		}

	</style>

	<script src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
</head>
<body>
	<div id="container">
		<header>
			<h1>Header</h1>
		</header>

		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
			</ul>
		</nav>

		<div id="main">
			<h2>Main section</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisl erat, posuere eu eleifend bibendum, ullamcorper et ipsum. Praesent feugiat viverra ipsum, a venenatis sem feugiat nec. In a dui metus. Nam adipiscing condimentum tortor ac convallis. Sed hendrerit, orci in volutpat ullamcorper, elit risus molestie mi, ac tempor nibh tellus vitae eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eleifend orci vitae risus imperdiet at consectetur dui ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sit amet quam elit. Suspendisse vitae scelerisque elit. Aenean non accumsan ipsum.</p>

			<p>Mauris placerat interdum ultrices. Sed vehicula dui ac ipsum rhoncus placerat. Mauris neque est, congue non varius quis, scelerisque at nunc. Quisque eget diam id metus lacinia commodo. Sed ut tellus ut est cursus placerat laoreet quis massa. Phasellus sed justo augue. Vestibulum ut mauris id justo mollis cursus at eget nisi. Aliquam erat volutpat. Donec sit amet lobortis mauris. Vivamus interdum, urna a vulputate dapibus, arcu dui aliquet turpis, vitae dictum mi urna feugiat sem. Integer pretium massa quam, eu interdum velit. Pellentesque nisi metus, congue non venenatis id, sagittis non velit. Aliquam mollis nisi et odio adipiscing tristique.</p>

			<p>Maecenas eu diam dolor. Nam in ipsum sem. Nulla in urna et arcu pharetra iaculis a quis tortor. Morbi eget dui enim. Sed elementum orci non elit varius egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed nibh sapien, ut placerat odio. Suspendisse nisl ligula, condimentum in hendrerit vel, elementum ut purus. Donec vel nulla sodales nibh lacinia scelerisque non vel ante. Ut congue mi quis est sodales in pretium sem ultricies. Vivamus nec quam orci. Maecenas laoreet volutpat dui vel imperdiet. Quisque a porttitor diam.</p>
		</div>
	</div>

	<footer>
		<p>Footer</p>
	</footer>
</body>
</html>
	<!doctype html>
	<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
	<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
	<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
	<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Centered column with fixed footer</title>
	<meta name="author" content="Rob Fletcher">

	<style>

	/* Sticky footer: http://www.cssstickyfooter.com/ */

	* {
	margin: 0;
	}

	html, body {
	height: 100%;
	}

	#container {
	min-height: 100%;
	}

	.ie6 #container, .ie8 #container {
	display: table;
	height: 100%;
	}

	#main {
	padding: 1em 1em 6em;
	}

	footer {
	margin-top: -5em;
	height: 3em;
	clear: both;
	}

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

	/* gradient filled background with central full-height column */

	html {
	background-color: #999999;
	background-image: -moz-linear-gradient(top, #999999, #ffffff);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #999999),color-stop(1, #ffffff));
	background-image: -webkit-linear-gradient(#999999, #ffffff);
	background-image: linear-gradient(top, #999999, #ffffff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#ffffff');
	background-repeat: no-repeat;
	}

	body {
	background: #fff;
	margin: 0 auto;
	max-width: 960px;
	}

	.ie6 body {
	width: 960px; /* ie6 doesn't understand max-width */
	}

	header, footer, nav {
	display: block;
	padding: 1em;
	}

	header, footer {
	background: #191970;
	color: #fff;
	}

	nav {
	background: #3D59AB;
	color: #fff;
	zoom: 1;
	}

	nav ul {
	overflow: hidden;
	padding: 0;
	}

	nav li {
	float: left;
	list-style: none;
	margin-right: 1em;
	}

	nav a {
	color: #ffffff;
	}

	p {
	margin-top: 1em;
	}

	/* shadow edging for the central column */

	body {
	-moz-box-shadow: 0 -0.5em 0.5em rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
	}

	@media screen and (max-width: 960px) {
	/* don't render the shadow if the viewport is too narrow otherwise it forces a horizontal scrollbar */
	body {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}
	}

	/* decent font stack */

	body {
	font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
	font-weight: 300;
	}

	</style>

	<script src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
	</head>
	<body>
	<div id="container">
	<header>
	<h1>Header</h1>
	</header>

	<nav>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	</ul>
	</nav>

	<div id="main">
	<h2>Main section</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisl erat, posuere eu eleifend bibendum, ullamcorper et ipsum. Praesent feugiat viverra ipsum, a venenatis sem feugiat nec. In a dui metus. Nam adipiscing condimentum tortor ac convallis. Sed hendrerit, orci in volutpat ullamcorper, elit risus molestie mi, ac tempor nibh tellus vitae eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eleifend orci vitae risus imperdiet at consectetur dui ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sit amet quam elit. Suspendisse vitae scelerisque elit. Aenean non accumsan ipsum.</p>

	<p>Mauris placerat interdum ultrices. Sed vehicula dui ac ipsum rhoncus placerat. Mauris neque est, congue non varius quis, scelerisque at nunc. Quisque eget diam id metus lacinia commodo. Sed ut tellus ut est cursus placerat laoreet quis massa. Phasellus sed justo augue. Vestibulum ut mauris id justo mollis cursus at eget nisi. Aliquam erat volutpat. Donec sit amet lobortis mauris. Vivamus interdum, urna a vulputate dapibus, arcu dui aliquet turpis, vitae dictum mi urna feugiat sem. Integer pretium massa quam, eu interdum velit. Pellentesque nisi metus, congue non venenatis id, sagittis non velit. Aliquam mollis nisi et odio adipiscing tristique.</p>

	<p>Maecenas eu diam dolor. Nam in ipsum sem. Nulla in urna et arcu pharetra iaculis a quis tortor. Morbi eget dui enim. Sed elementum orci non elit varius egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed nibh sapien, ut placerat odio. Suspendisse nisl ligula, condimentum in hendrerit vel, elementum ut purus. Donec vel nulla sodales nibh lacinia scelerisque non vel ante. Ut congue mi quis est sodales in pretium sem ultricies. Vivamus nec quam orci. Maecenas laoreet volutpat dui vel imperdiet. Quisque a porttitor diam.</p>
	</div>
	</div>

	<footer>
	<p>Footer</p>
	</footer>
	</body>
	</html>