Untitled

.col1 {
	background: rgb(237, 228, 214);
	height: 500px;
	float: left; /* floating col1 only */
	width: 600px;
	padding: 20px;
	/* margin-left: 20px; see the floating co1 over col2 and footer */
}
.col2 {
	background: rgb(173, 169, 130);
	height: 500px;
	padding: 20px;
	margin-left: 660px; /* 640 width of col1, 20px left */
}
footer {
	background: rgb(100, 98, 102);
	line-height: 3em;
	font-size: .6em;
	color: white;
	padding: 0 2em;
	clear: both;
}


--- html ---
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<aside class="col2">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>