3 column : three Columns : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » three Columns »

 

3 column


 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
  margin-right: 153px;
}
#right {
  margin-left: 150px;
}

#left_wrapper {
  width: 50%;
  margin-right: -150px;
  float: left;
  position: relative;
  z-index: 0;
}

#middle_wrapper {
  width: 300px;
  margin-right: -150px;
  float: left;
  position: relative;
  z-index: 2;
}

#right_wrapper {
  width: 49.9%;
  float: left;
  position: relative;
  z-index: 1;
}
</style>
</head>
<body>
  <div id="left_wrapper"
    <div id="left"
  <p>This is the left text :  This is the left text : 
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
  </p>
  </div>
  </div>
  <div id="middle_wrapper"
    <div id="middle">
  <p>This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
  </p> 
    </div>
  </div>
  <div id="right_wrapper"
    <div id="right">
   <p>This is the right text : This is the right text 
     This is the right text : This is the right text 
    This is the right text : This is the right text 
    This is the right text : This is the right text 
   </p>

   </div>
  </div>

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns