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