Code snippet page

<!-- XHTML:CSS Layout snippet 7. -->
<!-- Nesting an inner wrapping division to snippet 6 above
as a reference to force the three columns to be level across
the top of the template. -->

<!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;
	}
/* add innerWrapper as a reference for aligning the top
of the 3 columns of the template */
#innerWrapper {
	/* position absolutely below the header */
	position:absolute;
	top:70px;
	left:0px;
	width:100%;
	/* border added to demonstrate height of the wrapper */
	border:2px dotted #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;
	/* here we can position rightDivision to the top of the innerWrapper */
	top:0px;
	/* 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 {
	/* use clear to be sure that the footer appears below the 3 divisions */
	clear:both;
	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><!-- end of header -->
	<div id="innerWrapper">
		<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><!-- end of innerWrapper -->
</div><!-- end of wrapper -->

</body>
</html>