Two columns with header banner

Two columns with header banner : Two columns : Layout Attributes HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout Attributes » Two columns »

Two columns with header banner


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style rel="stylesheet" type="text/css">
#banner {
  margin-top: 10px;
  border-bottom: 1px solid #73AFB7;
  padding-left: 15px;
}
#banner p {
  margin: 0;
  height: 85px;
}
#mainNav {
  float: left;
  width: 175px;
  margin-top: 20px;
  padding-left: 10px;
}
#content {
  margin-left: 200px;
  padding-left: 10px;
  border-left: 1px solid #D6ECAE;
}
#footer {
  clear: both;
  padding-top: 10px;
  border-top: 1px solid #294E56;
}
p {
  margin-top: 5px;
  margin-bottom: 0;
  margin-top: 0;
  margin-bottom: 5px;
}

.byline {
  color: #73afb7;
  margin-bottom: 10px;
}

#mainNav ul {
  margin-left: 0;
  padding-left: 0;
}

#mainNav li {
  margin-bottom: 10px;
}

#content ul {
  font-size: 1.2em;
}

#content li {
  margin-bottom: 5px;
}
</style>
</head>

<body>
<div id="banner">
  <p><img src="http://www.navioo.com/style/logo.png" alt="" width="553" height="70" /></p>
</div>
<div id="mainNav">
  <ul>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
    <li>this is a test. </li>
  </ul>
</div>
<div id="content">
  <h1>header</h1>
  <p class="byline">By </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
  <h2>header 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
  <ul>
  <li>E</li>
  <li>L</li>
  <li>E</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
  <h2>Take Off that Smoking Jacket and Put on Those  Overalls </h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
  <h2>From Herbal Tea to Compost Tea </h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
  <p>&nbsp;</p>
</div>
<div id="footer">
  <p>Copyright 2006</p>
</div>
</body>
</html>