Style: Centered - Simple Website Tempate

View Demo
This layout is verticaly and horizontaly centered. Both the wrapper and the content remain centered at all times. It also has a min-width and a min-height in all browsers including IE6 - it's bullet proof!
<!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: Centered</title>
<style type="text/css">
<!--
/* --------------------------------------------------
Style: Centered
Author: Eric Watson
Website: www.websitecodetutorials.com
-----------------------------------------------------
: Site Colors : 

: Table Of Contents :
Resets
Defaults
Typography
Forms
Template
Links
Nav Menu
Global Classes
Content
---------------------------------------------------- */

/* -------------------- Resets --------------------- */
body, div, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
	margin: 0;
	padding: 0;
}
fieldset, table {
	border: none;
}
/* --------------- Document Defaults -------------- */
html {
	font-size: 100.01%;
}
body {
	height: 100%; 
	font-size: 62.5%;
	font-family: Tahoma, Arial, Helvetica, 'MS Sans Serif', sans-serif;
	color: #000;
	background-color: #666;
}
/* ------------------ Typography ------------------- */
h1 {
	font-size: 2em;
	padding: 20px 0;
}
h2 {
	font-size: 1.4em;
	text-align: center;
	padding: 10px 0;
}
p {
	font-size: 1.2em;
	margin: 0 0 .6em;
}
/* -------------------- Forms ---------------------- */

/* ------------------- Template -------------------- */
#wrapper {
	position: absolute; 
	height: 85%; 
	width: 70%;
	left: 15%; 
	top: 7.5%; 
	overflow: hidden;
	border: 2px solid #000;
	background-color: #CCC;
	min-height: 360px;
	min-width: 540px;
}
#header { 
	height: 60px;
	text-align: center;
	overflow: hidden;
	background: #999;
}
#nav {
	border-top: #000 solid 2px;
	border-bottom: #000 solid 2px;
	background: #E0E0E0;
	text-align: center;
	padding: 3px 0;
}
#main {
	text-align: center;
}
#content {
	position: absolute;
	height: 40%; 
	width: 80%;
	left: 10%; 
	top: 30%;
	text-align: justify;
}
#footer {
	height: 40px;
	width: 100%;
	text-align: center;
	background: #999;
	position: absolute;
	bottom: -1px;
	left: 0;
	border-top: #000 solid 2px;
}
/* ------------------- Links ---------------------- */

/* ------------------- Nav Menu -------------------- */
#nav ul {
	font-size: 1.2em;
	font-weight: bold;
	list-style: none;
}
/* ---------------- Global Classes ----------------- */

/* ----------------- Content/Pages ----------------- */
-->
</style> 
<!--[if IE ]>
<style type="text/css">
/* min-width/height */
body {
width:expression(
(d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
(d.clientWidth < 770 ? "770px" : "auto"));
}
#wrapper{
height:expression(
(d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
(d.offsetHeight < 420 ? "360px" : "85%"));
}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">

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

<div id="nav">
<ul>
<li>Nav</li>
</ul>
</div>

<div id="main">
<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>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

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

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