DIV Based Layout with CSS - Adding a right column
(Page 7 of 9 )
As you can guess, with minor additions, we can add a right column to our layout:
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
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">Left Section</div>
<div id="footer">Footer Section</div>
And, the compete code is listed below:
<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
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">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
The visual output is almost the same as for fixed boxes:
In this case, the same principle has been applied to make our DIVS float to left. Since the left section floats to the left, so does the content section and the right section. Actually, all of they are sticking to the left, achieving the desired result. Again, this technique saves code as compared to using fixed boxes.
Lastly, but not least, will see the “Holy Grail” for page layouts: “liquid” design with floating boxes. Let’s go there now.
Next: Liquid design with floating boxes >>
More Style Sheets Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 413 
