Add border for different columns together

Add border for different columns together : border : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » border »

Add border for different columns together


 


<!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;
    }
    
  p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    

  
  
</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>