Template voor vaste 3 kolommen layout.

HTML

<div id="mainContainer" class="clearfix">
<div id="header">
<h1>site title</h1>
<p>fixed 3-column layout</p>
</div>
<div id="navHorizontal">
<ul>
<li><a href="#" title="Page Link">Page Link 1</a></li>
<li><a href="#" title="Page Link">Page Link 2</a></li>
<li><a href="#" title="Page Link">Page Link 3</a></li>
<li><a href="#" title="Page Link">Page Link 4</a></li>
<li><a href="#" title="Page Link">Page Link 5</a></li>
</ul>
</div>
<div id="columnOne">
<h2>column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div id="navVertical">
<ul>
<li><a href="#" title="Page Link">Vertical Nav Page Link 1</a></li>
<li><a href="#" title="Page Link">Vertical Nav Page Link 2</a></li>
<li><a href="#" title="Page Link">Vertical Nav Page Link 3</a></li>
<li><a href="#" title="Page Link">Vertical Nav Page Link 4</a></li>
<li><a href="#" title="Page Link">Vertical Nav Page Link 5</a></li>
</ul>
</div>
<p>Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum.</p>
</div>
<div id="columnTwo">
<h1>column 2</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h2>heading h2</h2>
<p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h3>heading h3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h4>heading h4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
	<ul>
	<li>Bullet List Item</li>
	<li>Bullet List Item</li>
	</ul>
</li>
</ul>
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
<li>Numbered List Item
	<ol>
	<li>Numbered List Item</li>
	<li>Numbered List Item</li>
	</ol>
</li>
</ol>
</div>
<div id="columnThree">
<h2>column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
	<ul>
	<li>Bullet List Item</li>
	<li>Bullet List Item</li>
	</ul>
</li>
</ul>
</div>
<div id="footer">
<p><a href="#" title="footer link">Copyright</a> | <a href="#" title="footer link">Privacy Policy</a> | <a href="#" title="footer link">Contact Us</a></p>
</div>
</div>

CSS

body {
margin:10px;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
line-height:18px;
color:#000;
}
p {
margin:4px 0 6px 0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}
h1 {
font-size:26px;
}
h2 {
font-size:23px;
}
h3 {
font-size:20px;
}
h4 {
font-size:17px;
}
a:link, a:visited {
color:#c00;
text-decoration:underline;
}
a:hover, a:active {
color:#999;
text-decoration:none;
}
ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}
ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}
ul li, ol li {
margin:0 0 4px 0;
padding:0;
}
#mainContainer {
margin:0 auto;
padding:0;
width:900px;
border:1px dashed #454545;
}
#header {
margin:0;
padding:5px;
width:890px;
height:90px;
color:#fff;
background-color:#000;
}
#navHorizontal {
margin:0;
padding:0;
width:900;
height:30px;
line-height:30px;
background-color:#454545;
}
#navHorizontal ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navHorizontal ul li {
margin:0 0 0 -5px;
padding:5px 0 5px 0;
list-style:none;
display:inline;
}
#navHorizontal ul li a:link, #navHorizontal ul li a:visited {
padding:5px 8px 5px 8px;
color:#eee;
text-decoration:none;
border-right:1px solid #999;
}
#navHorizontal ul li a:hover, #navHorizontal ul li a:active {
color:#454545;
text-decoration:none;
background-color:#ccc;
}
#columnOne {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:190px;
background-color:#ccc;
}
#columnOne p, #columnThree p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li {
font-size:13px;
}
#columnOne h2, #columnThree h2 {
font-size:16px;
}
#navVertical {
margin:0 -5px 0 -5px;
padding:0;
width:200px;
background-color:#454545;
}
#navVertical ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navVertical ul li {
margin:0 0 0 -5px;
padding:0;
list-style:none;
border-bottom:1px solid #999;
}
#navVertical ul li a:link, #navVertical ul li a:visited {
padding:5px 8px 5px 8px;
color:#eeeeee;
text-decoration:none;
display:block;
}
#navVertical ul li a:hover, #navVertical ul li a:active {
color:#454545;
text-decoration:none;
background-color:#eee;
}
#columnTwo {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:490px;
background-color:#eee;
}
#columnThree {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:190px;
background-color:#ccc;
}
#footer {
margin:0;
padding:5px 5px 5px 10px;
width:885px;
height:20px;
font-size:10px;
color:#ccc;
background-color:#000;
clear:both;
}
#footer a:link, #footer a:visited {
color:#999;
text-decoration:none;
}
#footer a:hover, #footer a:active {
color:#fff;
text-decoration:underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}