Three column layout with sub sections

Three column layout with sub sections : three Columns : Layout HTML CSS TUTORIALS


 

Fluid Layout 
<!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=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .float-divider {
  clear: both;
  display: block;
  background: pink;
  height: 10px;
  font-size: 10px;
  line-height: 10px;
}

* .subSection1 {
  background-color: red;
  margin: 0;
  padding: 5px;
}

* .subSection2 {
  background-color: gold;
  margin: 5px;
  padding: 5px;
}

* .subSection3 {
  background-color: yellow;
  margin: 5px;
  padding: 5px;
}

#main {
  max-width: 700px;
}

#leftBar {
  float: left;
  width: 20%;
  min-width: 75px;
}

#content {
  float: left;
  width: 60%;
  min-width: 150px;
}

#rightBar {
  float: left;
  width: 20%;
  min-width: 115px;
}

#leftBar * .subSection2 {
  min-height: 43px;
}

#content * .subSection3 {
  display: block;
}

#head {
  float: left;
  width: 35%;
  min-width: 75px;
}

#detail {
  float: left;
  width: 65%;
  min-width: 75px;
}
</style>
</head>
<body>
<div id="main">
   <div class="subSection1"> 
      <h2>main - 100%</h2> 
      <div id="leftBar">
          <div class="subSection2"> 
              <h3>leftBar -20%</h3> 
          </div>
      </div> 

      <div id="content">
          <div class="subSection2"> 
              <h3>content - 60%</h3> 
                  <span id="head">
                      <span class="subSection3"> 
                           <em>head - 35%</em> 
                      </span>
                  </span> 
                  <span id="detail">
                      <span class="subSection3"> 
                           <em>detail - 65%</em> 
                      </span>
                  </span> 
                  <span class="float-divider">divider</span>
          </div>
      </div> 
     <div id="rightBar">
          <div class="subSection2"> 
               <h3>rightBar -20%</h3> 
          </div>
     </div> 
     <div class="float-divider">divider</div>
   </div>
</div> 


</body>
</html>

HTML code for linking to this page:

Three column layout with sub sections : three Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » three Columns »

Three column layout with sub sections

HTML CSS TUTORIALS