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


left column

footer stuff goes here

The markup
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
	<div id="container">
            <div id="left">
            	<h2>left column</h2>
            <!--end left--></div>
        <div id="right">
        <h2>right column</h2>
                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!
            	Click on the Markup or CSS links above to see how this is coded.
        <!--end right--></div>
                <p>footer stuff goes here</p>
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;