Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {margin:0;padding:0;}
body {
background:#333;
padding:10px;
color:#000;
}
h1, h2, p {margin:0 0 .7em}
#wrapper p {padding:0 10px;}
h1, h2 {text-align:center;}
#wrapper {
margin:0 auto;
background:#fff;/* center column colour*/
text-align:left;
position:relative;
z-index:0;
min-width:800px;
max-width:1200px;
border:1px solid #000;
overflow:hidden;
zoom:1.0;
}
#header {
background:#ccc;
clear:both;
position:relative;
z-index:2;
border-bottom:1px solid #000;
padding:0 0 1px;
zoom:1.0;/* ie6 fix*/
}
#footer {
background:#ccc;
color:#000;
clear:both;
padding:1px 0;
position:relative;
z-index:2;
text-align:center;
border-top:1px solid #000;
zoom:1.0;/* ie6 fix*/
}
/*if we float the middle column we avoid the ie6 3 pixel jog and also keep columns in normal source order (left,middle right) but we need to use a negative margin offset to make it all fit.*/
#middle {
float:left;
width:100%;
margin-right:-400px;/* width of left and right columns */
overflow:hidden;
}
#content {
margin-right:400px;/* width of left and right columns */
overflow:hidden;
min-height:450px;
}
* html #content {height:450px}/* min height fix for ie6*/
#left {
width:200px;
position:relative;
float:left;
z-index:2;
}
#right {
width:200px;
position:relative;
float:right;
z-index:2;
}
/*The following 2 absolute columns that just hold the column colour and no content */
#l, #r {
width:199px;
height:100%;
position:absolute;
bottom:0;
left:0;
background:#eee;/* left column color*/
z-index:1;
clear:both;
border-right:1px solid #000;
}
#r {
right:0;
left:auto;
background:#fcf;/* right column color*/
border:none;
border-left:1px solid #000;
}
* html #l, * html #r {
height:999em;
bottom:-1px
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>3 column layout with equal columns </h1>
</div>
<div id="left">
<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : </p>
</div>
<div id="middle">
<div id="content">
<p>Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : </p>
</div>
</div>
<div id="right">
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
</div>
<div id="footer">
<p>footer</p>
</div>
<!-- l & r are the left and right column colours only - they hold no content -->
<div id="l"></div>
<div id="r"></div>
</div>
</body>
</html>
