4 columns, all fluid


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>

<style type="text/css">

  #leftcontent {
    position: absolute;
    left:1%;
    width:20%;
    top:50px;
    background:#eee;
  }

  #centerleftcontent {
    position: absolute;
    left:22%;
    width:28%;
    top:50px;
    background:#fff;
  }

  #centerrightcontent {
    position: absolute;
    left:51%;
    width:28%;
    top:50px;
    background:#ccc;
  }

  #rightcontent {
    position: absolute;
    left:80%;
    width:19%;
    top:50px;
    background:#ddd;
  }
  
  #rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {
    border:1px solid #000;
  }
</style>
</head><body>
<div id="banner"><h1>4 columns, all fluid</div>
<div id="leftcontent">
  <h1>leftcontent</h1>
  <p>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. this is a test. this is a test. </p>
</div>

<div id="centerleftcontent">
  <h1>centerleftcontent</h1>
  <p>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. </p>
</div>

<div id="centerrightcontent">
  <h1>centerrightcontent</h1>
  <p>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. 
  this is a test. this is a test. this is a test. </p>
</div>

<div id="rightcontent">
  <h1>rightcontent</h1>
  <p>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. </p>
</div>

</body>
</html>
4 columns, all fluid : Four Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » Four Columns »

HTML CSS TUTORIALS
