Finally, we’ll build a three-column liquid layout with floating boxes. Without a doubt, this is the most used layout model on the Web.
Here is the code:
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
The HTML code is as follows:
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
The complete code is listed below:
<html>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Let’s explain in detail the code for this layout. As in the previous example, we make our “leftcol” DIV float to left and its width is set to 20%. Our “content” DIV is floated to left and its width is set to 59%, while our recently added “rightcol” DIV is floated to the right, and its width is set to 20% too. Header and Footer DIVS are kept to the same width of 100%.
Finally, we have reached our main goal, having a Web page layout that expands nicely, filling the whole screen space flawlessly. The “elastic” concept is well deserved here.
One final consideration is worth noting: since DIVS containers will expand down as we insert more elements into them, sooner or later, we will end up with different heights for each column of the Web page. How can we make them have the same heights? With a little bit of JavaScript, we can achieve the desired result. That will be considered as homework, since it’s out of the scope of this article.