Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="main.css" rel="stylesheet" media="all" type="text/css">
<link href="print.css" rel="stylesheet" media="print" type="text/css">
<style type="text/css">
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
margin: 0;
padding: 0;
}
ol, ul { list-style: none; }
/* end reset styles */
a img, img { border:none }/* remove borders from linked images*/
a:link { }/* set as appropriate*/
a:visited { }
a:hover { }
a:focus { }
a:active { }
input, textarea, select {
font-family:Arial; /*set font-family for IE*/
vertical-align:middle;
}
h1, h2, h3, h4, h5, h6, p { margin:0 0 1em }
/* start main structure */
body {
background:#fff;
color:#000;
padding:20px 0;
}
#outer {
max-width:1020px;
min-width:600px;
margin:0 auto;
border:1px solid #000;
}
* html #outer { width:960px }/* ie6*/
#header {
background:blue;
border-top:1px solid #333;
border-bottom:1px solid #333;
width:100%;/* ie6 haslayout*/
}
#nav {
list-style:none;
text-align:center;
padding:10px 0;
background:red;
}
#nav li {
display:inline;
margin:0 10px;
}
/* left column*/
#sidebar {
float:left;
width:250px;
min-height:100px;
background:#fcf;
}
/* middle column*/
#main { margin:0 250px;padding:0 5px }
#main-inner {
width:100%;
float:left;/* avoids clear issues in center column */
background:#ffc;
}
/* right column */
#secondary {
float:right;
width:250px;
background:#fcf;
}
#footer {
clear:both;/* clear:floats*/
width:100%;
text-align:center;
background:blue;
border-top:1px solid #333;
border-bottom:1px solid #333;
}
</style>
</head>
<body id="home">
<div id="outer">
<div id="header">
<h1>Header</h1>
<ul id="nav">
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
</ul>
</div>
<div id="sidebar">
<p>left column</p>
</div>
<div id="secondary">
<p>right column</p>
</div>
<div id="main">
<div id="main-inner">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</div>
<div id="footer">
<p class="copyright">© 2010</p>
</div>
</div>
<!-- end outer -->
</body>
</html>
The left and right columns are floated and the middle column is not floated but has margins to clear the floats at the side and thus fills the center fluid portion without the need for explicit widths. The main-inner 100% float is to contain any clear element you use in the middle section from clearing the side columns in error. 
Reply With Quote
Bookmarks