3 column fluid layout - 33% columns : three Columns : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » three Columns »

 

3 column fluid layout - 33% columns


 


<!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>
<title>column fluid layout - 33% columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header {
  height: 50px;
  border-bottom: 20px solid #363;
  background: #aaa;
  text-align: center;
}
#cell3 {
  width:100%;
  background: #ddd;
  float:left;
  margin:0;
}
#cell2 {
  width:66.6%;
  float:left;
  background: #ccc;
  border-right: 1px solid #999;

}
#cell1 {
  width:50%;
  background:#bbb;
  float:left;
  border-right: 1px solid #999;
}
#cell2a, #cell3a {
  float:right;
  position:relative;
  width:100%;
  margin-right:-99.9%;
}
#footer {
  clear: both;
  height: 25px;
  background: #FFF;
  text-align: center;
  border-top:1px solid #000;
}
</style>
</head>
<body>
<div id="header">
  <h1>this is the title</h1>
</div>
<div id="cell3"
  <div id="cell2"
    <div id="cell1"
      <div id="cell2a"
        <div id="cell3a"
          <h2>Sub header</h2>
          <p>this is a test. </p>
          <h2>Sub header</h2>
          <p>this is a test. </p>
        </div>
        <h2>Sub header</h2>
        <p>this is a test. </p>
        <p>this is a test. </p>
        <p>this is a test. </p>
        <p>this is a test. </p>
      </div>
      <h1>Headline</h1>
      <h2>Sub Header</h2>
      <p>this is a test. </p>
      <p>this is a test. </p>
    </div>
  </div>
</div>
<div id="footer">| footer | </div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns