HTML

<table summary="Employee Pay Sheet" id="box-table-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#box-table-a {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#box-table-a th {
background:#B9C9FE none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:4px solid #AABCFE;
color:#039;
font-size:13px;
font-weight:normal;
padding:8px;
}
#box-table-a td {
background:#E8EDFF none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:1px solid transparent;
color:#669;
padding:8px;
}
#box-table-a tr:hover td {
background:#D0DAFD none repeat scroll 0 0;
color:#339;
}

HTML

<div id="postHeader">
<a href="#" title="Links">Links ››</a>  <a href="#" title="Site Map">Site Map ››</a>  <a href="#" title="Contact">Contact ››</a>
</div>

<div id="centerColumn">

	<div id="navbar">
	<ul>
	<li><a href="#" title="Home">Home</a></li>
	<li><a href="#" title="About">About</a></li>
	<li><a href="#" title="Gallery">Gallery</a></li>
	<li><a href="#" title="Contact">Contact</a></li>
	</ul>
	</div>

	<div id="header">
	<h1>site title</h1>
	<h2>fixed 3-column over 4-column layout</h2>
	</div>

<h2>centerColumn</h2>
<h3>sub heading</h3>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>

<hr />

	<div id="cell_1">
	<h2>cell_1</h2>
	<p class="news">Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	<ul class="news">
	<li class="news"><a href="#">Link</a><br />
	<em>Date<br />
	Puerorum amicas adplicat auris.</em></li>

	<li class="news"><a href="#">Link</a><br />
	<em>Date<br />
	Puerorum amicas adplicat auris.</em></li>
	</ul>
	</div>

	<div id="cell_2">
	<h2>cell_2</h2>
	<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque.</p>
	<p>Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	</div>

	<div id="cell_3">
	<h2>cell_3</h2>
	<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque.</p>
	<p>Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	</div>

	<hr />

	<div id="box_1">
	<h2>box_1</h2>
	<p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	<ul>
	<li><a href="#" title="Link">Link…</a></li>
	</ul>
	</div>

	<div id="box_2">
	<h2>box_2</h2>
	<p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	<ul>
	<li><a href="#" title="Link">Link…</a></li>
	</ul>
	</div>

	<div id="box_3">
	<h2>box_3</h2>
	<p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	<ul>
	<li><a href="#" title="Link">Link…</a></li>
	</ul>
	</div>

	<div id="box_4">
	<h2>box_4</h2>
	<p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
	<ul>
	<li><a href="#" title="Link">Link…</a></li>
	</ul>
	</div>

	<div id="footer">
	Copyright, © 2005-2006 <a href="#" title="Company Name">Company Name</a>
	</div>

</div>

CSS

body {
margin:.5em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}

a {
color:#c00;
text-decoration:underline;
}

a:hover {
color:#616161;
text-decoration:none;
}

blockquote {
margin:1em;
padding:.5em .5em .5em 85px;
background-color:#D7ECF8;
}

blockquote p {
margin:.2em;
color:#000;
}

hr {
margin-bottom:20px;
border:none;
width:99%;
color:#eee;
background-color:#eee;
height:1px;
clear:both;
}

td.desc {
padding:4px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
}

#postHeader {
margin:0 auto;
padding:0 .2em .3em .2em;
width:720px;
text-align:right;
vertical-align: middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
text-transform:uppercase;
}

#centerColumn {
margin:0 auto;
padding:1em;
width:720px;
text-align:left;
vertical-align: middle;
background-color:#fff;
}

#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.1em;
}

#centerColumn h3 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:.8em;
font-weight:lighter;
letter-spacing:.1em;
}

#navbar {
margin:-1em -1em 0 -1em; /* Mozzila attributes */
padding:1em 0 1em 0 !important; /* IE specific attributes */
padding:1em 0 0 0;
background-color:#ccc;
}

#navbar ul {
margin:0 0 -1em .3em !important;
margin:.3em 0 0 .3em;
padding:0 0 1em 0;
list-style:none;
background-color:#ccc;
}

#navbar li {
margin:0 0 0 -.27em;
padding:.2em 0 .2em 0 !important;
padding:1em 0 1em 0;
list-style:none;
display:inline;
background-color:#ccc;
}

#navbar li a {
margin:0 0 0 0;
padding:1em .5em 1em .5em !important;
padding:1em .5em 0 .5em;
}

#header {
margin:0 -1em 0 -1em;
padding:0 0 0 0;
height:143px;
background-color:#ccc;
border-top:1px solid #fff;
}

#header h1 {
margin:0 0 -14px 10px;
padding:10px 0 0 .9em;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.7em;
font-weight:lighter;
letter-spacing:.15em;
color:#000;
}

#header h2 {
margin:0 0 0 0;
padding:1em 0 0 30px;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
color:#000;
}

#cell_1 {
margin:0 5px 1em 0;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_2 {
margin:0 14px 1em 14px;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_3 {
margin:0 0 1em 5px;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_1 p, #cell_2 p, #cell_3 p {
font-size:.75em;
color:#000;
}

#cell_1 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

#cell_2 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

#cell_3 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

.barepic {
border:none;
}

.right {
float:right;
margin:5px;
padding:2px;
}

.left {
float:left;
margin:5px;
padding:2px;
}

.center {
width:auto;
margin-left:auto;
margin-right:auto;
}

.news em {
font-size:.8em;
color:#000;
}

#cell_1 ul.news, #cell_2 ul.news, #cell_3 ul.news {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#cell_1 li.news, #cell_2 li.news, #cell_3 li.news {
margin:0 0 .3em 0;
padding:5px 0 6px 10px;
font-size:.75em;
}

#cell_1 ul, #cell_2 ul, #cell_3 ul {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#cell_1 li, #cell_2 li, #cell_3 li {
margin:0 0 .3em 0;
padding:5px 0 6px 5px;
font-size:.75em;
}

#box_1 {
margin:0 5px 2em 0;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_2 {
margin:0 7px 2em 14px;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_3 {
margin:0 14px 2em 7px;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_4 {
margin:0 0 2em 5px;
padding:8px;
float:left;
width:150px;
background-color:#cccccc;
}

#box_1 p, #box_2 p, #box_3 p, #box_4 p {
font-size:.75em;
color:#000;
}

#box_1 h2, #box_2 h2, #box_3 h2, #box_4 h2 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-size:.8em;
} 

#box_1 ul, #box_2 ul, #box_3 ul, #box_4 ul {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#box_1 li, #box_2 li, #box_3 li, #box_4 li {
margin:0 0 .3em 0;
padding:5px 0 0 5px;
font-size:.8em;
}

#footer {
position:relative;
clear:both;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#fff;
}

HTML

<div id="container">
	<div id="header">
	<h1>site title</h1>
	<h2>Fixed 1-column header and sidebar</h2>
</div>
	<div id="leftColumn">
	<h2>leftColumn</h2>
	<ul>
	<li><a href="#" title="link title">Link Item</a></li>
	<li><a href="#" title="link title">Link Item</a></li>
	<li><a href="#" title="link title">Link Item</a></li>
	</ul>
	<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
    levat arte fessos corporis artus.</p>
	</div>
<div id="centerColumn">
<h2>centerColumn</h2>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auri.</p>
<p><a class="small" href="fixed-1c2.zip" title="Download">download this template</a></p>
<h2>Header 2</h2>
<p><a href="#" title="link title">Link Item</a></p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
	<ul>
	<li>List Item</li>
	<li>List Item</li>
	</ul></li>
</ul>
<blockquote><p><strong>blockquote</strong><br />
Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p></blockquote>
</div>
	<div id="footer">
	<a href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> |
	<a href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> |
	<a href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> |
	<a href="http://www.csssnippets.be">CSS Snippets</a></p>
	</div>
	</div>

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;
background-image: transparent;
}
:focus {
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
quotes: "" "";
}

Layout CSS

body {
margin:20px;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#ccc;
text-decoration:none;
}
ul {
margin:0 0 0 20px;
list-style-type:disc;
}
li {
margin:4px 0 5px 10px;
}
blockquote {
margin:1em;
padding:.5em;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
#container {
margin:0 auto;
padding:0;
width:650px;
text-align:left;
vertical-align: middle;
background-color:#fff;
border:1px solid #ccc;
}
#header {
margin:0;
padding:0;
height:160px;
background-color:#2c2c2c;
}
#header h1 {
margin:0;
padding:20px 0 0 20px;
font-size:1.8em;
letter-spacing:.1em;
color:#fff;
font-weight:lighter;
}
#header h2 {
margin:0;
padding:0 0 0 20px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
color:#eee;
}
#leftColumn {
float:left;
margin:0;
padding:0;
width:160px;
font-size:.9em;
}
#leftColumn p {
padding:10px
}
#leftColumn h2 {
margin:0;
padding:10px 0 0 10px;
font-size:1em;
}
#leftColumn ul {
margin:0 0 0 0;
list-style:none;
}
#leftColumn li {
margin:4px 0 5px 10px;
}
#leftColumn li a {
text-decoration:underline;
}
#leftColumn li a:hover{
text-decoration:none;
}
#centerColumn {
margin:0 0 0 180px;
padding:0;
background-color:#fff;
}
#centerColumn p {
padding:10px
}
#centerColumn h2 {
margin:0;
padding:10px 0 5px 0;
font-size:1.3em;
letter-spacing:.1em;
}
#footer {
position:relative;
bottom:0;
margin:80px 0 0 0;
padding:0;
height:60px;
line-height:60px;
text-align:center;
font-size:.6em;
background-color:#fff;
border-top:1px solid #ccc;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here" />
<meta name="keywords" content="keywords" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>fixed header an 1-column layout (basic)</title>
</head>
<body>
<div id="centerColumn">
	<div id="header">
	<h1>site title</h1>
	<h2>fixed 1-column layout (basic)</h2>
	</div>
	<div id="fauxRightColumn">
	<h2>fauxRightColumn</h2>
	<ul id="nav">
	<li><a href="#" title="link title">Link Item</a></li>
	<li><a href="#" title="link title">Link Item</a></li>
	<li><a href="#" title="link title">Link Item</a></li>
	</ul>
	<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
    levat arte fessos corporis artus.</p>
	</div>
<h2>centerColumn</h2>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
<h2>Header 2</h2>
<p><a href="#" title="link title">Link Item</a></p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
	<ul>
	<li>List Item</li>
	<li>List Item</li>
	</ul></li>
</ul>
<blockquote><p><strong>blockquote</strong><br />
Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p></blockquote>
	<div id="footer">
	<a href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> |
	<a href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> |
	<a href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> |
	<a href="http://www.csssnippets.be">CSS Snippets</a></p>
	</div>
</div>
</body>
</html>

Reset CSS

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;
	background-image: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Layout CSS

CSS

body {
margin:.5em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#ccc;
text-decoration:none;
}
p {
margin:6px 0;
}
blockquote {
margin:16px;
padding:8px;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
ul {
list-style-type:disc;
}
li {
margin:0 0 0 25px;
list-style-type:disc;
}
#centerColumn {
margin:0 auto;
padding:1em;
width:600px;
text-align:left;
vertical-align: middle;
background-color:#fff;
border:1px solid #ccc;
}
#centerColumn h2 {
margin:0 0 0 0;
padding:6px 0;
font-size:1.2em;
letter-spacing:.1em;
}
#header {
margin:0 0 0 0;
padding:0 0 0 0;
height:160px;
background-color:#fff;
border:1px solid #ccc;
}
#header h1 {
margin:0 0 -8px 0;
padding:16px 0 0 24px;
font-size:1.7em;
letter-spacing:.1em;
}
#header h2 {
margin:0 0 0 0;
padding:16px 0 0 24px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
}
#fauxRightColumn {
position:relative;
float:right;
margin:.5em 0 0 .5em;
padding:0 .7em .25em .7em;
width:11em;
font-size:.9em;
background-color:#fff;
border:1px solid #ccc;
}
#fauxRightColumn h2 {
font-size:.9em;
}
#nav ul {
margin:0;
list-style:none;
}
#nav li {
margin:0 0 8px 0;
list-style:none;
}
#nav li a {
text-decoration:underline;
}
#nav li a:hover{
text-decoration:none;
}
#footer {
position:relative;
bottom:0;
margin:80px 0 0 0;
padding:0;
height:64px;
line-height:64px;
text-align:center;
font-size:.7em;
background-color:#fff;
border-top:1px solid #ccc;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here" />
<meta name="keywords" content="keywords" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>fixed box layout</title>
</head>
<body>
<div id="centerColumn">
	<div id="header">
	<h1>site title</h1>
	<h2>fixed box layout</h2>
	</div><!--//end #header//-->
	<div id="nav">
	<ul>
	<li><a href-"#" title="Home">Home</a></li>
	<li><a href-"#" title="About">About</a></li>
	<li><a href-"#" title="Gallery">Gallery</a></li>
	<li><a href-"#" title="Contact">Contact</a></li>
	</ul>
	</div><!--//end #nav//-->
<h2>centerColumn</h2>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
<h2>Header 2</h2>
<p><a href="#" title="link title">Link Item</a></p>
	<ul>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item
		<ul>
		<li>List Item</li>
		<li>List Item</li>
		</ul></li>
	</ul>
	<blockquote><p><strong>blockquote</strong><br />Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p></blockquote>
	<div id="footer">
	<a href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> | <a href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> | <a href="http://www.csssnippets.be/" title="CSS Snippets">CSS Snippets</a>
	</div>
	<!--//end #footer//-->
</div><!--//end #centerColumn//-->
</body>
</html>

CSS

body {
margin:3em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#eee;
text-decoration:none;
}
blockquote {
margin:1em;
padding:.5em;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
#centerColumn {
margin:0 auto;
padding:1em;
width:38em;
text-align:left;
vertical-align: middle;
background-color:#ccc;
border:1px solid #999;
}
#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}
#header {
margin:-1em -1em 0 -1em;
padding:0 0 0 0;
height:5em;
background-color:#fff;
}
#header h1 {
margin:0 0 -.6em 0;
padding:.5em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}
#header h2 {
margin:0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}
#nav {
margin:0 0 1em 0;
padding:.4em 0 0 0;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
margin:0;
padding:.25em;
display:inline;
}
#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#ccc;
border-top:1px solid #999;
}