3 Column fluid layout: 50% column, 2 x 25% 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 - 50% column + 2 x 25% columns</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header {
height: 50px;
border-bottom: 20px solid #fff;
background: bbb;
}
#cell3 {
width: 100%;
background: #aaa;
float: left;
margin: 0;
}
#cell2 {
width: 75%;
float: left;
background: #ccc;
border-right: 1px solid #99c;
}
#cell1 {
width: 66.6%;
background: #eee;
float: left;
border-right: 1px solid #99c;
}
#cell2a,#cell3a {
float: right;
position: relative;
width: 50%;
margin-right: -49.5%;
}
#cell3a {
width: 100%;
margin-right: -100%
}
#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 header</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>
<p>center column.</p>
</div>
<h1>Headline</h1>
<h2>Sub Header</h2>
<p>this is a test. </p>
</div>
</div>
</div>
<div id="footer">Copyright | footer | </div>
</body>
</html>
Related examples in the same category