STYLE SHEETS

DIV Based Layout with CSS

Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 641

December 21, 2004

TABLE OF CONTENTS:

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.

<style type="text/css">

</style>

And 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="footer">Footer Section</div>

The complete code is listed below:

<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</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>

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%.

Visual representation for the output is appreciated in the following image:

DIV Based Layout with CSS

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.

Next: Three-column liquid layout with floating boxes >>