Left Section More Left . . . . More Left . . . . More Left . . . . More Left . . . . More Left . . . . More Left . . . . More Left . . . . More Left . . . .
Content Section

The CSS and HTML

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 100%;
}
#leftcol {
  background: #f00;
   float: left;
  width: 19%;
  height: 900px;
}
#content {
  background: #fff;
   float: right;
  width: 80%;
  height: 900px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}
-->
</style>


<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
This LIQUID stuff is what I really want! Nothing is defined in PIXELS. Everything is defined in PERCENTS.

The source of the page is this web site.

And compared to the junky other 3 FIXED web pages they designed this page actually floats very well when you resize it. Well I think untill the page gets longer then the defined height of the page which is still defined in PIXELS.

Liquid is the way to go!!!!!

Here is what they say about the code:

Any well-designed Web page must flow properly, expanding the visual content to fit at any screen resolution. The professional look is evident, and extremely elegant, when it’s reached. However, as with everything in life, it has some limitations. These include many user screen options, monitor resolutions, different hardware and so on. Keeping in mind these conditions, “liquid” design is still the definitive way to go for truly professional websites.

Since we are talking about this issue, let’s see some code to get our “liquid” effect done.

As we see in our new developed layout, there are many noteworthy things to explain in detail. All of the DIVS containers' widths are expressed in percentages, so they will expand to fit the whole screen space. For the sake of this example, we have declared heights in pixels for our DIVS. This is a bad practice! When applied to real world design, DIVS heights will expand accordingly to the content included in them. Sure, this is a well-known subject for experienced designers, but it could be a very important issue to be considered for beginners.

Back to the code, we make our “leftcol” DIV float to the left, and its width is set to 19%. The “content” DIV is floated to the right and its width is set to 80%, covering the remaining space. Header and footer sections widths are set to 100%.

As depicted above, the containers will expand to fill the screen, filling the complete space, and exposing a very consistent look for different screen resolutions.