Back to CSS Tips
Preview: what the working site looks like.

header

left column

footer stuff goes here

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
	<div id="container">
    	<h1>header</h1>
            <div id="left">
            	<h2>left column</h2>
            <!--end left--></div>
        <div id="right">
        <h2>right column</h2>
        	<p>
                It doesn't get any easier than this!<br />
                Float your left column left and <em>overflow: auto;</em> fits your right column into 
				what space is left over ... and that's it!
            </p>
            <p>
            	Click on the Markup or CSS links above to see how this is coded.
            </p>
        <!--end right--></div>
            <footer>
                <p>footer stuff goes here</p>
            </footer>    
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	margin: 20px auto;
	background: #0f0;
}
h1 {
	line-height: 75px;
	margin: 0;
	text-align: center;
	background: #ff6600
}
#left {
	width: 360px;
	padding: 20px;
	float: left; 
}
#right {
	padding: 20px;
	overflow: auto;
	background: #ccc;
}
footer {
	color: #ccc;
	background: #330000;
}
h2, h3, footer p {
	line-height: 45px;
	margin: 0;
	text-align: center;
}