static width and centered : width : Box Model HTML CSS TUTORIALS


HTML CSS TUTORIALS » Box Model » width »

 

static width and centered


 


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

<style type="text/css">
  #frame {
    width:650px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    padding:0px;
    text-align:left;
    background:#aaa;
    }
    
  #contentleft {
    width:175px;
    padding:0px;
    float:left;
    background:#bbb;
    }
  
  #contentcenter {
    width:300px;
    padding:0px;
    float:left;
    background:#eee;
    }
  
  #contentright {
    width:175px;
    padding:0px;
    float:left;
    background:#ccc;
    }
  
  #contentheader {
    background:#ddd
    }
    
  p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    
  h1 {
    font-size:14px;
    padding-top:10px;
    }
    
  #contentheader h1 {
    font-size:14px;
    padding:10px;
    margin:0px;
    }
  
  #contentright p font-size:10px}
  
</style>
</head><body>
<div id="frame">
  <div id="contentheader"><h1>static width and centered</h1></div>
  <div id="contentleft">
    <h1>contentleft</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. </p>
  </div>

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

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

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Box Model
» width