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>3 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>
Related examples in the same category