Style: Easy - Website Template Tutorial

View Demo
<!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>websitecodetutorials.com Style: Equal</title>
<style type="text/css">
<!--
/* --------------------------------------------------
Style: Equal
Author: Eric Watson
Website: www.websitecodetutorials.com
----------------------------------------------------- */
* {
	margin:0;
	padding:0;
}
html {
	height:100%;
}
body {
	margin:0 auto;
	height:100%;
	background:#666;
}
p {
	font-size:1.2em;
	text-align:center;
	margin:20px;
}
h1 {
	text-align:center;
	font-size:1.4em;
	line-height:2.1;
}
#wrapper {
	margin:0 auto;
	min-height:100%;
	width:782px;
	position:relative; /* enables faux columns to be positioned relative to wrapper */
	background:#999;
	border-left:2px solid #000;
	border-right:2px solid #000;
	overflow:hidden; /* clears floated columns in FX, Opera, Safari, & Chrome */
}
#header {
	height:52px;
	padding:0 0 20px;
	background:url(images/equal-columns-header.jpg); /* height of image is 52px */
}
#footer {
	position:absolute;
	bottom:0;left:0;
	width:782px;
	height:50px;
	background:#999;
	border-top:2px solid #000;
	clear:both; /* clears floated columns in IE */
}
.column {
	float:left;
	width:230px;
	margin:0 0 75px 20px; /* margin-bottom clears footer */
	background:#CCC;
	display:inline;
	position:relative; /* allows z-index value */
	z-index:1; /* places "real columns" above "faux columns" */
	border-top:2px solid #000;
	border-left:2px solid #000;
	border-right:2px solid #000;
}
/* ------------ faux columns ------------ */
.faux-column {
	position:absolute;
	top:72px;
	bottom:70px;
	width:230px;
	background:#CCC;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
}
.a{left:20px;}
.b{left:274px;}
.c{left:528px;}
-->
</style> 
<!--[if IE 6]>
<style type="text/css">
#wrapper {
	height:100%;
	overflow:visible;
}
.faux-column {
	height:999em;
	top:auto; /* IE6 does not understand top and bottom positioning */
}
#header {
	position:relative; /* allows z-index value */ 
	z-index:1; /* places header above faux columns */
}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">

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

<div class="column">
<p>Yada yada yada yada yada yada yada yada.</p>
</div>

<div class="column">
<p>Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</p>
</div>

<div class="column">
<p>Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</p>
</div>

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

<div class="faux-column a"></div>
<div class="faux-column b"></div>
<div class="faux-column c"></div>

</div> <!-- end #wrapper -->
</body>
</html>
ADVERTISE HERE