Two column layout with menu on the left
<!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" lang="en-US">
<head>
<title></title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, "Times New Roman", Times, serif;
color: #778899;
background-color: transparent;
float: right;
width: 300px;
text-align: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
#content {
margin-left: 16em;
margin-right: 2em;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #2A4F6F;
background-color: transparent;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
font: 110% Georgia, "Times New Roman", Times, serif;
color: #2A4F6F;
background-color: transparent;
border-bottom: 1px dotted #CCCCCC;
}
h1 {
font: 150% Georgia, "Times New Roman", Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
}
</style>
</head>
<body>
<div id="header">
<img src="stage-logo.gif" width="187" height="29" alt="Stage & Screen" class="logo" />
<span class="strapline">theatre and film reviews</span>
</div>
<div id="content">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. Nam et sapien. Sed id dolor in tortor eleifend aliquam. Mauris vulputate. Nulla nec diam et pede faucibus ornare.</p>
<p>Sed nec erat sed sem molestie congue. Cras lacus sapien, ultrices ac, mattis quis, lobortis eu, turpis. Aliquam egestas arcu a massa. In hendrerit odio eget lectus. Nullam iaculis ultricies ipsum. Nullam id felis. Phasellus at metus sed velit luctus semper. Cras wisi diam, pharetra sed, pharetra ac, sodales in, quam. Nullam facilisis. Aliquam rhoncus sapien ac dui. Donec mattis ipsum. Nulla a nunc id orci mollis semper. Vestibulum porta quam a dolor.</p>
<p>Vestibulum dictum massa at odio. In dignissim ante id dui. Morbi rhoncus elit ac ipsum. Curabitur a elit. Phasellus in lorem quis turpis imperdiet accumsan. Suspendisse potenti. Curabitur a enim sed lacus tempor venenatis. Mauris sed ipsum sit amet leo dictum scelerisque. Suspendisse a lectus. Aliquam nec felis at erat sagittis pretium. Nunc id augue pharetra augue commodo tincidunt. Praesent placerat, diam quis porttitor lobortis, orci arcu nonummy sapien, at venenatis ipsum wisi non wisi. Sed bibendum nunc at justo. Vestibulum leo lacus, lobortis vel, interdum ac, varius non, augue. Nam rhoncus dictum libero. Donec porttitor porta lectus. Vivamus consectetuer feugiat wisi. Morbi sit amet nibh eget nibh feugiat porttitor.</p>
</div>
<div id="nav">
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Up</a></li>
<li><a href="#">Title</a></li>
</ul>
</div>
</body>
</html>
Related examples in the same category