Fixed One-Column #2 Layout (Basic)
<!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>
<title>Fixed 1-column #2 layout (basic)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*******************************************************
TITLE: Fixed One-Column #2 Layout (Basic) V1.0 (Beta)
DATE: 20070807
AUTHOR: The CSS Tinderbox - http://www.csstinderbox.com
*******************************************************/
body {
margin:20px;
padding:0;
height:100%;
background-color:#ffffff;
color:#000000;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
a {
color:#cc0000;
text-decoration:underline;
}
a:hover {
color:#cccccc;
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:#eeeeee;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
blockquote p {
margin:.2em;
}
#container {
margin:0 auto;
padding:0;
width:650px;
text-align:left;
vertical-align: middle;
background-color:#ffffff;
border:1px solid #cccccc;
}
#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:#ffffff;
font-weight:lighter;
}
#header h2 {
margin:0;
padding:0 0 0 20px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
color:#eeeeee;
}
#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:#ffffff;
}
#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:#ffffff;
border-top:1px solid #cccccc;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1>site title</h1>
<h2>fixed 1-column #2 layout (basic)</h2>
</div>
<!--//end #headern//-->
<div id="leftColumn">
<h2>leftColumn</h2>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
levat arte fessos corporis artus.</p>
</div>
<!--//end #leftColumn//-->
<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 auris.</p>
<h2>Header 2</h2>
<p><a href="#">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>
<!--//end #centerColumn//-->
<div id="footer"> <a target="_blank" href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> | <a target="_blank" href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> | <a target="_blank" rel="nofollow" href="http://www.csstinderbox.com">The CSS Tinderbox</a>
</p>
</div>
<!--//end #footer//-->
</div>
<!--//end #container//-->
</body>
</html>
Related examples in the same category