Preview: what the working site looks like.
left column
right column
center column
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left">left column</div>
<div id="right">right column</div>
<div id="center">
center column
<!--end center--></div>
<!--end container--></div>
</body>
</html>
The CSS
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 900px;
margin: 30px 0;
overflow: auto;
font-size: 0.8em;
}
#left, #right, #center {height: 400px;} /*for demo only*/
#left {
width: 300px;
float: left;
background: #fcc;
}
#right {
width: 150px;
float: right;
background: #cf0;
}
#center {
overflow: auto;
background: #0f0;
}