Three Column Fixed|Fluid|Fixed 5 - Website Template Tutorial

View Demo

Paul O'B came up with the original concept for this layout. I dumbed it down a little bit, cleaned it up, and made it a little easier to follow and replicate. This is a complicated layout which uses no images, but rather negative margins (among others) to create the equal height columns. It's centered (once max-width is reached), has equal height columns, 100% height, header, sticky footer, fixed width left/right columns, and a fluid center with a min/max width wrapper in all browsers including IE6. It currently has a min-width of 680px and max-width of 1280px. However, it can easily be changed to whatever value you see fit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Style: Three Column Fixed|Fluid|Fixed #5</title>
<style type="text/css">
<!--
/* ----------------------------------------------------
Style: Three Column Fixed|Fluid|Fixed #5
Author: Eric Watson
Website: http://www.websitecodetutorials.com
------------------------------------------------------- 
: Site Colors : 

: Table Of Contents :
Resets
Defaults
Typography
Forms
Layout
Links
Menus
Global Classes
Content
---------------------------------------------------- */

/* -------------------- Resets --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
	margin: 0;
	padding: 0;
}
fieldset, table {
	border: none;
}
a {
	outline: 0;
}
/* --------------- Document Defaults -------------- */
html {
	font-size: 100.01%;
	height: 100%;
}
body {
	height: 100%;
	font: 62.5%/1.5 Tahoma, Arial, Helvetica, 'MS Sans Serif', sans-serif;
	background: #333;
	color: #333;
}
/* ------------------ Typography ------------------- */
h1 {
	font-size: 2.6em;
	text-align: center;
	padding: 38px 0 0;
	font-weight: normal;
}
h2 {
	font-size: 1.8em;
	text-align: center;
	margin: 120px 0 0;
	font-weight: normal;
}
h3 {
	font-size: 2em;
	text-align: center;
	padding: 17px 0 0;
	font-weight: normal;
}
p { 
	font-size: 1.2em;
	margin: 2em;
	text-align: justify;	
}
/* -------------------- Layout --------------------- */
#wrapper {
	min-width: 680px;
	max-width: 1280px;
	margin: 0 auto;
	background: #999; /* right column color */
	min-height: 100%;
 	position: relative;
 	margin-top: -70px; /* make space for footer */
}
#header {
	background: #666;
	clear: both;
	margin: 0 -200px; /* pull header into full width */
	position: relative;
	z-index: 2;
	height: 120px;
	border-top: 70px solid #666; /* soak up negative margin to make way for footer */
}
#footer {
	background: #666;
	clear: both;
	margin: auto;
	position: relative;
	z-index: 2;
	height: 70px;
	min-width: 680px;
	max-width: 1280px;
}
#inner {
	margin-right: 200px;
	background: #999; /* left column color IE6 only */
	position: relative;
	z-index: 2;
}
#middle {
	background: #CCC; /* center column color IE6 only */
	margin-left: 200px;
 	z-index: 2;
}
#content, #content2 {
	position: relative;
	width: 100%;
	float: left; /* contain clearing */
}
#content2 { 
	margin: 0 -1px; /* moz needs this */
}
#content {
	position: relative;
	float: left; /* contain clearing */
	width: 100%;
}
#left{
	width: 200px;
	margin-left: -200px; 
	position: relative;
	float: left;
 	z-index: 2;
}
#right {
	width: 200px;
	margin-right: -200px; 
	position: relative;
	float: right;
	z-index: 2;
}
/* #color1 and #color2 just hold the column colors and nothing else */
#color1 {
	width: 200px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #999;
	z-index: 1;
}
#color2 {
	position: absolute;
	height: 100%;
	left: 200px;
	right: 200px;
	background: #CCC;
	z-index: 1;
	top: 0;
}
/* --------------------- Links ---------------------- */

/* --------------------- Menus ---------------------- */
/* Main Menu */

/* Footer Menu */

/* ---------------- Global Classes ----------------- */
/* clear without structural mark-up */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* mac hide - force layout in IE \*/
.clearfix {
	display: block;
}
/* End hide */
/* ----------------- Content/Pages ----------------- */
-->
</style>

<!--[if IE 6]>
<style type="text/css">
#wrapper, #inner, #middle {
	height:100%
}
#wrapper, #footer {
	width:expression(
	(d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
	(d.clientWidth > 1280 ? "1280px" : d.clientWidth < 680 ? "680px" : "auto"));
}
#left{
	margin-right:-3px; /* 3 pixel jog*/
}
#right{
	margin-left:-3px; /* 3 pixel jog*/
}
</style>
<![endif]-->

</head>
<body>
<div id="wrapper">
<div id="inner">
<div id="middle" class="clearfix">

<div id="content">

<div id="header">
<h1>Header</h1>
</div>

<div id="left">
<h2>Left</h2>
</div>
				
<div id="right">
<h2>Right</h2>
</div>

<div id="content2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
</div>

</div><!-- end #content -->
</div><!-- end #middle -->
</div><!-- end #inner -->
	
<div id="colorl"></div>
<div id="color2"></div>

</div><!-- end #wrapper -->

<div id="footer">
<h3>Footer</h3>
</div>

</body>
</html>

ADVERTISE HERE