Master header and two columns

Master header and two columns : Two columns : Layout HTML CSS TUTORIALS


 



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

#masthead {
  border: 1px solid #cccccc;
}

#sideNav {
  float: left;
  width: 150px;
  background-color: #F5f7f7;
  border: 1px solid #cccccc;
}

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

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

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

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

HTML code for linking to this page:

Master header and two columns : Two columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » Two columns »

Master header and two columns

HTML CSS TUTORIALS