DIV Based Layout with CSS - Fixed layout design with floating boxes
(Page 6 of 9 )
Since we have developed a couple of examples giving absolute positions to each DIV, the next step is building the same schema, this time using the “float” property. Originally, the float property was not intended for building Web page layouts. It’s commonly used to make text float around images or similar page structures. Possible values for float are: left (element floats to left), right (element floats to the right), none (element doesn’t float), and inherit (element inherits from its parent). However, we can apply this property to our DIVS, and get the same effect as with fixed boxes. Let’s see how it works:
<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;
}
#content {
background: #fff;
float: left;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 800px;
height: 100px;
}
-->
</style>
The corresponding HTML is like this:
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
Again, we present the complete code:
<html>
<head>
<title>TWO-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;
}
#content {
background: #fff;
float: left;
width: 650px;
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="footer">Footer Section</div>
</body>
</html>
There is something really interesting going on. We have applied the float property to the “leftcol” DIV, making it float to the left. Then, we made the content DIV float to the left too, sticking the two boxes to each other. The same layout effect has been achieved, making the boxes float. Please note, all absolute position declarations were removed, as well as top and left coordinates properties, so the whole file size has been decreased.
Finally, as to making our footer display correctly, we have “cleared” the float properties previously declared. Pretty good, isn’t it? The visual output is almost identical to that achieved with fixed boxes.
Next: Adding a right column >>
More Style Sheets Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 405 
