Code snippet page

<!-- XHTML:CSS Layout snippet 2. -->
<!-- Asolute positioning 'div' elements to create a simple two column layout. -->
<!-- Applying a large left-hand margin to the right-hand division to allow space for the left-hand division. -->

<!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">
#leftDivision {
	position:absolute;
	top:20px;
	left:10px;
	width:250px;
	background-color: #CC33FF;
	border:2px solid #000000;
	}
#rightDivision {
	/* note the positioning co-ordinates are the same as for leftDivision */
	position:absolute;
	top:20px;
	left:10px;
	width:500px;
	/* 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="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>

</body>
</html>