Colorado State University

JTC 372

Web Design and Management

Two-column layout example

Below is a very simple two-column layout, with code sample and CSS.

#header
#main

HTML Code

<div id="wrapper">
<div id="header">#header</div>
<div id="nav">#nav</div>
<div id="content">
<div id="main">#main</div>
<div id="sidebar">#sidebar</div>
</div>
<div id="footer">#footer</div>
</div>

CSS Code

body {
 	font-family: Verdana, Geneva, sans-serif;
 	}
#wrapper {
 	width: 750px;
 	}
#header {
 	background-color: #F9C;
 	height: 100px;
 	}
#nav {
 	background-color: #3FC;
 	height: 25px;
 	}
#content {
 	background-color: #FFF;
	overflow: auto;
 	}
#main {
 	float: left;
	background-color: #3FF;
 	width: 500px;
 	height: 400px;
 	}
#sidebar {
 	float: left;
 	width: 250px;
 	background-color: #CF3;
 	height: 250px;
 	}
#footer {
 	clear: both;
 	background-color: #F93;
 	}