Code snippet page

<!-- XHTML:CSS Layout snippet 5. -->
<!-- Nesting two 'div' elements within a wrapper. -->
<!-- Using relative and absolute positioning to create a simple two column layout centered on the screen. -->

<!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">
body {
	/* a bug fix for IE will require us to center the body element */
	text-align:center;
	}
#wrapper {
	/* and then setting back to left-align for the wrapper */
	text-align:left;
	/* the use here of relative positioning does not take the division out 
	of the document	flow but allows us to shift the division from its natural 
	position on the page if required */
	/* in fact if we do not provide co-ordinates then the division will occupy its
	natural position on the page */
	/* however we will of created a position reference for the nested
	divisions */
	position:relative;
	width:770px;
	margin-left:auto;
	margin-right:auto;
	/* background and border added to demonstrate that because rightDivision 
	inside the wrapper is neither floated or given a position then the wrapper
	height does not collapse to zero */
	background-color: #FFFFFF;
	border:2px dotted #000000;
}
#leftDivision {
	position:absolute;
	top:0px;
	left:0px;
	width:250px;
	background-color: #CC33FF;
	border:2px solid #000000;
	}
#rightDivision {
	/* add a margin to allow space for leftDivision */
	margin-left:270px;
	background-color: #6699CC;
	border:2px solid #000000;
	padding:0px 10px 0px 10px;
	}
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: 18px;
	font-weight: normal;
	color: #000000;
	}
</style>
</head>
<body>
<div id="wrapper">
	<div id="leftDivision">
	<h2>Left Division</h2>
	<h2>Lorem ipsum dolor sit amet</h2>
	<h2>Lorem ipsum dolor sit amet</h2>
	<h2>Lorem ipsum dolor sit amet</h2>
	<h2>Lorem ipsum dolor sit amet</h2>
	<h2>Lorem ipsum dolor sit amet</h2>
	</div>
	<div id="rightDivision">
	<h1>Right 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>
	<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>

</body>
</html>