Use absolute position to create header and three column under it : three Columns « Layout

Use absolute position to create header and three column under it : three Columns « Layout « HTML / CSS

 





<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title></title>

  <style type="text/css">

body {

  margin: 0px;

  padding: 0px;

  color: black;

  background-color: #ccc;

}

#top {

  margin: 5px;

  padding: 10px;

  background-color: #fff;

  border: 1px solid #000;

  height: 70px;

}

#left {

  position: absolute;

  top: 97px;

  left: 0px;

  margin: 5px;

  padding: 10px;

  background-color: #fff;

  border: 1px solid #000;

  width: 90px;

}

#middle {

  margin: 0px 122px 5px 122px;

  padding: 10px;

  background-color: #fff;

  border: 1px solid #000;

}

#right {

  position: absolute;

  top: 97px;

  right: 0px;

  margin: 5px;

  padding: 10px;

  background-color: #fff;

  border: 1px solid #000;

  width: 90px;

}



  </style>

</head>



<body>

  <div id="top">

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  </div>

  <div id="left">

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  </div>

  <div id="middle">

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  </div>

  <div id="right">

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  this is a test. this is a test. this is a test. this is a test. this is a test. 

  </div>

</body>

</html>
w___w___w._j_a_va_2__s___._c__o_m | Contact Us
All other trademarks are property of their respective owners.