3 column layout with equalising columns and footer
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer{
height:100%;
min-height:100%;
margin-left:260px;
margin-right:130px;
background:#aaa;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
}
html>body #outer{
height:auto;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#eee;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
}
#left {
position:relative;
width:260px;
float:left;
margin-left:-259px;
padding-top:72px;
}
#left p {padding-left:1px;padding-right:3px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;
width:130px;
float:right;
margin-right:-129px;
padding-top:72px;
}
#leftfr {
float:right;
width:125px;
}
#leftfl {
float:left;
width:130px;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #ddd;
text-align:center;
position:relative;
}
* html #footer {
height:52px;
}
#clearheader{
height:72px;
}
#clearfooter{
clear:both;
height:40px;
}
div,p {
margin-top:0
}
* html #centrecontent {
height:1%;
margin-bottom:12px
}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="leftfl">
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="leftfr">
<p>Left 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 : Right content goes here : Right content
goes here : Right content goes here : Right content goes here : Right content
goes here : </p>
</div>
<div id="clearheader"></div>
<div id="centrecontent">
<p>link</p>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">| <a href="">A</a> | <a href="">2</a> | <a href="">3</a> | <a href="">
E</a> | <a href="">Author</a> | </div>
<div id="header">Header</div>
</body>
</html>
Related examples in the same category