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


HTML CSS TUTORIALS » Layout » three Columns »

 

3 Column fluid layout - 25% side 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 - 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:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns