The CSS and HTML follow
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 1200px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 1200px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 1200px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
<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>
This is a LIQUID page and everything is defined in percents of page width.
This is where i stole it from! Check it out for the detains!.
Again the height is still defined in PIXELS so I suspect it will float OK until the text is longer then the height. But still it works pretty well.
Here is what they say about the code
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.
Wrapping Up
As seen on the examples presented here, DIV layout with CSS is a very powerful technique, well-suited to face different design approaches and styles, and a big improvement for our background as Web designers. Web pages are faster to download, avoid useless markup, look more appealing to search engines, and keep us closer to Web standards. There is a lot to gain in migrating from table-based to div-based layout. Just give it a try. Good luck!