Untitled

HTML File

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Y you do this</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id = "wrapper">
<div id = "header">
<div id = "text">
<h1>Header</h1>
</div>
</div>
<div id = "navigation">
<span>Navigation here</span>
</div>

<div id = "content">
<div id = "contentleft">
<div id = "contentleftheader">
<h1>Dirty lazy</h1>
</div>
<div id = "contentlefttext">
<h3>So lazy</h3>
<p>
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.</p>
</div>
</div>
<div id = "contentright">
<div id = "contentrightheader">
<h1>Dirty lazy 2 aside</h1>
</div>
<div id = "contentrighttext">
<h3>So lazy</h3>
<p>
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.
So lazy that this seems almost like a hard task.</p>
</div>
</div>
</div>

<div id = "downcontent">
<div id = "column1">
<div id = "column1header">
<h3>Lazy</h3>
</div>
<div id = "column1text">
You wont understand the code anyway.
</div>
</div>
<div id = "column2">
<div id = "column2header">
<h3>Lazy</h3>
</div>
<div id = "column2text">
You wont understand the code anyway.
</div>
</div>
<div id = "column3">
<div id = "column3header">
<h3>Lazy</h3>
</div>
<div id = "column3text">
You wont understand the code anyway.
</div>
</div>
</div>

<div id = "bottom">
<div id = "bottomleft">
<div id = "bottomtext">
I am very lazy
</div>
</div>
<div id = "bottomright">
<div id = "bottomtext">
I am very lazy
</div>
</div>
</div>
</div>
</body>
</html>


CSS file
#wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	border: 1px solid black;
	padding: 10px;
}
#header {
	border: 1px solid black;
	height: 100px;
	background-color: #CCC;
}
#text {
	margin-top:25px;
	height: 50px;
	text-align:center;
}
#navigation {
	margin-top: 20px;
	height: 20px;
	background-color: #CCC;
	font-weight: bold;
}
#content {
	margin-top: 40px;
	height: 400px;
}
#contentleft {
	width: 500px;
	float: left;
	height: 400px;
	border: 1px solid black;
}
#contentright {
	float: right;
	width: 350px;
	height: 400px;
	border: 1px solid black;
}
#downcontent {
	clear: both;
	height: 150px;
	margin:-10px;
	margin-top: 20px;
	border: 1px solid black;
}
#column1, #column2, #column3 {
    float: left;
    height: 120px;
    width: 250px;
	margin-left: 27px;
	margin-right: 27px;
	border: 1px solid black;
	margin-top:15px;

}

#bottom {
	clear: both;
	height: 70px;
	border: 1px solid black;
	margin:-10px;
	margin-top: 10px;
}
#bottomleft {
	width: 50%;
	float: left;
	height:100%;
	text-align: center;
}

#bottomright {
	width: 50%;
	float: right;
	height:100%;
	text-align: center;
}
#bottomtext {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
	margin-top:25px;
	background-color: #CCC;
}