Left list menu and three columns

Left list menu and three columns : List menu : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » List menu »

Left list menu and three columns


 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>CSS Positioning Example</title>
  <style rel="stylesheet" type="text/css">
#page {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 800px;
  background-color: #fff;
}

#masthead {
  border-bottom: 1px solid black;
}

#sideNav {
  float: left;
  width: 150px;
  background-color: #ccc;
  border-bottom: 1px solid black;
}

#sideRight {
  float: right;
  width: 150px;
  padding: 0px;
  background-color: #aaa;
  border-bottom: 1px solid black;
}

#content {
  margin: 0px 150px 0px 150px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.item {
  padding: 10px;
  min-height: 75px;
  height: 75px;
}

#sideNav a:link,#sideNav a:visited {
  display: block;
  padding: 5px;
}

#sideNav a:hover {
  background-color: #eee;
}
</style>
</head>
<body> 
<div id="page"> 
  <div id="masthead"> 
    <h2>Masthead</h2> 
  </div> 
  <div id="sideNav"> 
    <a href="#">Left link one</a>
    <a href="#">Left link two</a>
    <a href="#">Left link three</a>
    <a href="#">Left link four</a>
  </div> 
  <div id="sideRight"> 
     Lorem ipsum dolor sit amet.
  </div> 
  <div id="content"> 
    <div class="item"> 
      <h3>Item One</h3> 
      <p>
       This is a test. 
      </p>
    </div>
    <div class="item"> 
      <h3>Item Two</h3> 
      <p>
       This is a test. 
      </p>
    </div>
  </div> 
</div> 
</body>
</html>