Three Column Fixed|Fluid|Fixed #1 - Website Template Tutorial

View Demo

This Layout uses one repeating image to help make the equal height faux columns. It's centered (once max-width is reached), has equal height faux 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.

In order to fully replicate this layout, you will need to create a 200px x 5px image that will repeat-y down the page which will give you your faux column. Go here to create the image, save it somewhere in your sites folder structure, and then just link to it via your css as shone below.

<!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></title>
<style type="text/css">
<!--
/* ----------------------------------------------------
Style: Three Column Fixed|Fluid|Fixed #1
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;
	color: #333;
	background: #CCC;
}
/* ------------------ Typography ------------------- */
h1 {
	font-size: 3em;
	font-family: Arial;
	font-weight: normal;
	line-height: 3.5;
	text-align: center;
}
h2 {
	font-size: 1.8em;
	padding: 20px 0 0;
}
h3 {
	font-size: 1.6em;
	margin: 70px 0 0;
}
p {
	font-size: 1.2em;
	margin: 0 0 1em;
	text-align: justify;
}
/* -------------------- Layout --------------------- */
#wrapper {
	margin: 0 auto;
	min-width: 480px;
	max-width: 1080px;
	min-height: 100%;
	background: url(threecolumn.jpg) top right repeat-y;
	border-left: 200px solid #999;
	position: relative; /* IE7 & IE6 need this */
}
#header {
	background: #666;
	margin-left: -200px;
	position: relative; /* IE7 & IE6 need this */
	min-height: 0; /* IE7 needs this */
}
#left {
	float: left; 
	width: 200px;
	text-align: center;
	margin-left: -200px;
	position: relative; /* IE6 needs this to show float */
}
#right {
	float: right;
	width: 200px;
	text-align: center;
}
#content {
	margin: 50px 220px 50px 20px;
}
#clearfooter {
	height: 70px;
	clear: both;
}
#footer {
	height: 70px;
	text-align: center;
	margin: -70px auto 0 auto;
	background: #666;
	min-width: 680px;
	max-width: 1280px;
	position: relative; /* IE7 & IE6 need this */
}
/* --------------------- Links ---------------------- */

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

/* Footer Menu */

/* ---------------- Global Classes ----------------- */

/* ----------------- Content/Pages ----------------- */
-->
</style> 
<!--[if IE 6]>
<style type="text/css">
#wrapper {
	height: 100%;
}
body {width:expression( documentElement.clientWidth < 680 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 680 ? "680" : "auto") : "680px") : ( documentElement.clientWidth > 1280 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1280 ? "1280" : "auto") : "1280px") : "auto" ) );
position:relative;
}
#header {
	height:1px
}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">

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

<div id="left">
<h3>Left</h3>
</div>

<div id="right">
<h3>right</h3>
</div>

<div id="content">
<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>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>
</div>

<div id="clearfooter">
</div>

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

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

</body>
</html>

ADVERTISE HERE