Code snippet page

<!-- XHTML:CSS Layout snippet 6. -->
<!-- Using absolute positioning, float and nesting to create a robust 
three column layout with a header and footer. -->

<!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" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View snippet page</title>
<style type="text/css">
#wrapper {
	position:absolute;
	top:10px;
	left:10px;
	width:955px;
	/* border added to demonstrate height of the wrapper */
	border:2px dotted #000000;
}
#header {
	width:100%;
	background-color: #FF3366;
	border:2px solid #000000;
	}
#leftDivision {
	float:left;
	width:220px;
	background-color: #CC33FF;
	border:2px solid #000000;
	}
#centerDivision {
	width:480px;
	/* add a margin to allow space for leftDivision */
	margin-left:235px;
	background-color: #6699CC;
	border:2px solid #000000;
	padding:0px 10px 0px 10px;
	}
#rightDivision {
	position:absolute;
	top:55px;
	/* use absolute positioning of 0px so that the rightDivision lines up 
	with the header and footer on the right-hand side */
	right:0px;
	width:200px;
	background-color: #9999FF;
	border:2px solid #000000;
	}
#footer {
	width:100%;
	background-color: #FF3366;
	border:2px solid #000000;
	}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	background-color: #CCCCCC;
	}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	}
</style>
</head>
<body>

<div id="wrapper">
	<div id="header">
	<h1>Header: Lorem ipsum dolor sit amet, consectetur adipisicing elit,</h1>
	</div>
	<div id="leftDivision">
	<p>Left Division</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	</div>
	<div id="centerDivision">
	<h1>Center Division</h1>
	<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	</p>
	<h2>Lorem ipsum dolor sit amet</h2>
	<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	</p>
	</div>
	<div id="rightDivision">
	<p>Right Division</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Lorem ipsum dolor sit amet</p>
	</div>
	<div id="footer">
	<p>Footer: Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
	</div>
</div>

</body>
</html>