CSS universe http://www.cssuniverse.com Fri, 24 Jul 2009 14:19:46 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Three column layout http://www.cssuniverse.com/three-column-layout/ http://www.cssuniverse.com/three-column-layout/#comments Fri, 24 Jul 2009 14:19:08 +0000 http://cssuniverse.com/?p=3

<style type=”text/css”>
<!–
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
top: 100px;
left: 650px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
–>
</style>

The HTML code is the following:

<div id=”header”>Header Section</div>
<div id=”leftcol”>Left Section</div>
<div id=”content”>Content Section</div>
<div id=”rightcol”>Right Section</div>
<div id=”footer”>Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type=”text/css”>
<!–
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
left: 650px;
top: 100px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
–>
</style>
</head>
<body>
<div id=”header”>Header Section</div>
<div id=”leftcol”>Left Section</div>
<div id=”content”>Content Section</div>
<div id=”rightcol”>Right Section</div>
<div id=”footer”>Footer Section</div>
</body>
</html>

]]> http://www.cssuniverse.com/three-column-layout/feed/ 0