Basic 3-Column Sample Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
.content>p {
margin: 0;
}
.content>p+p {
text-indent: 30px;
}
.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0 210px 20px 170px;
border: 1px solid black;
padding: 10px;
z-index: 3;
}
#navleft {
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
padding: 10px;
z-index: 2;
}
#navright {
position: absolute;
width: 168px;
top: 20px;
right: 20px;
border: 1px dashed black;
padding: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<h1>header</h1>
<p>Web.</p>
<p>What?</p>
</div>
<div class="content">
<h2>CSS in Context</h2>
<p>their systems.</p>
</div>
<div class="content">
<h2>Content</h2>
<p>page.</p>
</div>
<div id="navleft">
<h2>Some Links</h2>
<p>
<a href="" title="">Home Page</a><br/>
<a href="" title="">Home</a><br/>
<a href="" title="">Book</a><br/>
<a href="" title="">One</a><br/>
<a href="" title="">Here</a><br/>
<a href="" title="">Nowhere</a><br/>
<a href="" title="">Four</a><br/>
<a href="" title="">Link</a><br/>
</p>
</div>
<div id="navright">
<h2>CSS</h2>
<p>CSS.</p>
<p>subject,
<a href="mailto:d@d.com">drop me an email</a></p>
</div>
</body>
</html>
Related examples in the same category