DIV Based Layout with CSS

By: Alejandro Gervasio Search For More Articles!

Rating: / 268 Disclaimer
2004-12-21 Author Terms

Table of Contents:
DIV Based Layout with CSS
The table-based approach
The mighty DIV tag
Fixed layout design with fixed boxes
Three-column fixed layout
Fixed layout design with floating boxes
Adding a right column
Liquid design with floating boxes
Three-column liquid layout with floating boxes

DIV Based Layout with CSS

(Page 1 of 9 )

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.

Introduction

We see it every day. As we surf the huge network of the Web, we are able to appreciate
several page layouts through different websites. They run the gamut from classical but
highly effective two and three-column designs, to those exotic and certainly uncommon
designs which seem not to fall into a specific category.

For many years, Web designers have been sticking firmly to table-based layouts,
achieving coherent and consistent looks by the use of complex table nesting techniques,
gif spacers and other well-known design processes. Currently, table layout still continues
to have a strong presence on the Web, since it provides wide cross-browser compatibility.
Tables are pretty well supported elements for browsers, and that’s an extremely powerful
reason to use them for Web page layouts. But this strong compatibility comes with an
extra cost. Most of the time, nested tables introduce lots of additional markup, and
increase file size, download times and server requests when using graphics as spacers,
even if they are cached later.

Extra HTML pushes the important content farther down in the source code, making it less
likely that a search spider will give Web pages a high relevance score for the keywords.
With the use of CSS and DIV tags, we can achieve the same table-based layout effects,
reduce our markup code noticeably, get faster page downloads, and separate content from
its visual presentation. We are getting closer to standards-compliant code, and our Web
pages are more appealing to search engine spiders.

Now, is everything good about CSS? No, unfortunately. The major drawback with CSS is
that browsers don’t display reliably some CSS rules because most of them are not
completely compliant with Web standards. Still, the advantages of using CSS and DIV
tags for page layout are numerous, and certainly are appealing to many Web designers, as
modern browsers add more reliable support.

With the pros and cons in our hands, let’s see the basics of how table design works.

DIV Based Layout with CSS - The table-

based approach
(Page 2 of 9 )

One of the most common page layouts using tables is easy to do with the ALIGN
attribute. This is a left-hand navigation bar with a larger content section, directly to the
right of it, building only two tables.

Here is the code:

<table align=”left” width=”20%” height=”100%”>

<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>

<table align=”right” width=”80%” height=”100%”>

<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>
We build this simple two-column layout, placing the tables as mentioned above: one is
located to the left and the other is located to the right. The ALIGN attribute helps us to
turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain
and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements
in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to
disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper
style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>

<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

<table id=”leftnavigation” width=”20%” height=”100%”>

<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID
contextual selectors from an external style sheet allow us to build the visual appearance
for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more
complex layouts, adding nested tables techniques and so. However, I would strongly
recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust
me.

DIV Based Layout with CSS - The mighty

DIV tag
(Page 3 of 9 )

According to the O’Reilly HTML Reference, “the DIV element gives structure and
context to any block-level content in the document. Each DIV element becomes a generic
block-level container for all content within the required start and end tags.” As we can
see, the DIV tag is a powerful generic element well suited for being used as a container
within our Web page. This turns it into a good candidate for creating sections or divisions
(hence "DIV") of Web documents.

The concept is very intuitive. Instead of using tables as layout elements, we are going to
take advantage of DIVS as excellent content containers to build our page layout. In
conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

Before we explain any further, two general categories used for Web page design must be
clearly differentiated: “fixed” and “liquid" design. When referring to “fixed” design, we
are talking about a Web page that has “fixed” dimensions. Widths (and optionally,
heights) for each container element are assigned normally in pixels.

The final result of this approach is that Web pages are displayed with a determined
“fixed” size, and they don’t “expand” to cover all the space in the computer monitor.
Many “big” websites currently use this technique for achieving a consistent look and size
across several user screen resolutions.

On the other hand, Web pages built over a “liquid” design principle will display as
“elastic” documents, expanding as needed according to different monitor
resolutions. Normally, dimensions for any container element are expressed in a
percentage. “Liquid design,” when used properly, looks much more professional and
takes one step further the definition that conceives a Web page as an “elastic” element,
not a desktop document.

With all of these basic concepts out of the way, we will see different approaches for page
layouts, depending on whether we follow a “fixed” design or a “liquid” design pattern.

DIV Based Layout with CSS - Fixed

layout design with fixed boxes
(Page 4 of 9 )

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:

<style type="text/css">
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
 left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 700px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>

And here’s the HTML code:

<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 as follows:

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
 position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
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>

Let’s see what’s happening here. We have given fixed dimensions and absolute positions
to all our DIVS. Widths and heights are expressed in pixels, as well as top and left
coordinates.

For the sake of this article, CSS code is within the same Web page, but it should always
be attached as an external file. Please remember, separating content from visual
presentation is a key concept that makes websites easily maintainable and accessible. The
visual output for the code is the following:

DIV Based Layout with CSS - Three-

column fixed layout
(Page 5 of 9 )

With little additions to the code, we can easily build a three-column fixed layout. Let’s
see how it works:

<style type="text/css">
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
 top: 100px;
left: 650px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>

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="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
left: 650px;
top: 100px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
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="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Here is the visual output:

As stated above, with minor modifications to the code, we can easily add another column
to our existing layout, keeping widths and heights expressed in pixels. These simple
examples show clearly that once we have defined our general layout, we are able to add
more DIVS into the main containers or other elements, building more complex layouts
with little or no effort. In a moment, we’ll see another interesting approach for styling
DIVS: floating boxes.

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.
DIV Based Layout with CSS - Adding a
right column
(Page 7 of 9 )

As you can guess, with minor additions, we can add a right column to our layout:

<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;
}
#rightcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
width: 800px;
height: 100px;
}
-->
</style>
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="rightcol">Left Section</div>
<div id="footer">Footer Section</div>

And, the compete code is listed below:

<html>
<head>
<title>THREE-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;
}
#rightcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
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="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The visual output is almost the same as for fixed boxes:

In this case, the same principle has been applied to make our DIVS float to left. Since the
left section floats to the left, so does the content section and the right section. Actually, all
of they are sticking to the left, achieving the desired result. Again, this technique saves
code as compared to using fixed boxes.

Lastly, but not least, will see the “Holy Grail” for page layouts: “liquid” design with
floating boxes. Let’s go there now.

DIV Based Layout with CSS - Liquid

design with floating boxes
(Page 8 of 9 )

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">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 19%;
height: 500px;
}
#content {
background: #fff;
float: right;
width: 80%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</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">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 19%;
height: 500px;
}
#content {
background: #fff;
float: right;
width: 80%;
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="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:

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.

DIV Based Layout with CSS - Three-

column liquid layout with floating boxes
(Page 9 of 9 )

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>

The corresponding visual representation is shown below:

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!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by

Developer Shed, Inc. The content provided is intended for entertainment and/or
educational purposes in order to introduce to the reader key ideas, concepts, and/or
product reviews. As such it is incumbent upon the reader to employ real-world tactics for
security and implementation of best practices. We are not liable for any negative
consequences that may result from implementing any information covered in our articles
or tutorials. If this is a hardware review, it is not recommended to open and/or modify
your hardware.