Back to CSS Tips
Preview: what the working site looks like.

Big heading

Small heading

Left
Middle
footer stuff here
The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Untitled Document</title>
</head>
<body>  
    <div id="container">
		<header>
			<h1 id="head1">Big heading</h1>
			<h2 id="head2">Small heading</h2>
		</header>
				<div id="left">Left</div>
				<div id="right">Right</div>
				<div id="middle">Middle</div>
		<footer>
			footer stuff here
		</footer>
    <!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 900px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
	text-align: center;
}
header {
	background: #ff0;
	overflow: auto;
}
	#head1, #head2 {width: 400px;}
		#head1 {
			float: left;
			background: #0F0;	
		}
		#head2 {
			float: right;
			background: #3C0;
		}
		#left, #right, #middle {
			height: 300px; /*demo only*/
			padding: 100px 0 0;
		}
		#left, #right {width: 300px;}
			#left {
				float:left;
				background: #00f;
			}
			#right{
				float:right;
				background: #f00;
			}
			#middle{
				margin: 0 auto;
				background-color: #CC3;
			}
footer {
	line-height: 30px;
	background: #360;
}