Three-Column Layout without footer : three Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » three Columns »

Three-Column Layout without footer


 
<!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>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#top {
  margin: 20px;
  padding: 10px;
  background: #ccc;
  height: 100px;
}
#left {
  position: absolute;
  left: 10px;
  top: 170px;
  width: 200px;
}
#center {
  background: #ccc;
  margin-top: 0;
  margin-left: 220px;
  margin-right: 220px;
}
#right {
  position: absolute;
  right: 10px;
  top: 170px;
  width: 200px;
}

div > p {
  margin-top: 0;
}
</style>
</head>
<body>
  <div id="top">
    <h1>
      This is the header area of the three column plus header
      layout
    </h1>
  </div>
  <div id="left">
    <p>
          This is a test. This is a test. 
    </p>
  </div>
  <div id="center">
    <p>
           This is a test. This is a test. 
    </p>
  </div>
  <div id="right">
    <p>
           This is a test. This is a test. 
    </p>
  </div>
</body>
</html>