3 Column fluid layout - 25% side columns

3 Column fluid layout - 25% side columns : three Columns : Layout Attributes HTML CSS TUTORIALS


 

<!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>3 Column fluid layout - 25% side columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
  border: 1px solid #000;
  position: relative
}

#cell3 {
  width: 100%;
  background: #aaa;
  float: left;
  margin: 0;
  position: relative;
}

#cell2 {
  width: 75%;
  background: #bbb;
  float: left;
  border-right: 1px solid #000;
}

#cell1 {
  width: 33.3%;
  background: #ccc;
  float: left;
  border-right: 1px solid #000;
}

#cell2a,#cell3a {
  float: right;
  position: relative;
}

#cell2a {
  width: 200%;
  margin-right: -199.5%;
}

#cell3a {
  width: 50%;
  margin-right: -49.5%;
}

* html #cell3a {
  margin-right: -100%
}
h1 {
  background: #fff;
  text-align: center;
  margin: 0;
  border-bottom: 1px solid #000
}

#footer {
  text-align: center;
  height: 30px;
  background: #ddd;
  border-top: 1px solid #000;
  clear: both;
}
</style>
</head>
<body>
<div id="container">
<h1>Three column fluid layout</h1>
<div id="cell3"> 
  <div id="cell2"> 
    <div id="cell1"> 
      <div id="cell2a"> 
        <div id="cell3a"> 
      <p>This is some text for the right column : </p>
      </div>
    <p>This is some text for the center column : </p>
    </div>
    <p>This is some text for the left column : This is some text for the left column.</p></div>
  </div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

HTML code for linking to this page:

3 Column fluid layout - 25% side columns : three Columns : Layout Attributes HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout Attributes » three Columns »

3 Column fluid layout - 25% side columns

HTML CSS TUTORIALS