4 columns, all fluid : Four Columns « Layout « HTML / CSS






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>

   
    
  








Related examples in the same category

1.Main title with four columns under
2.Four columns with absolute position
3.Four columns with footer
4.four column with float, and a footer with clear both
5.Four columns with footer 2
6.Four columns with footer 3
7.Faux Column CSS Layouts - 4 Column - faux-39-4-col
8.Faux Column CSS Layouts - 4 Column - faux-40-4-col
9.Faux Column CSS Layouts - 4 Column - faux-41-4-col
10.Faux Column CSS Layouts - 4 Column - faux-42-4-col
11.Four even columns with two level header
12.Four column layout