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.
The table-based approach
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.
The mighty DIV tag
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.
Fixed layout design with fixed boxes
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:
Three-column fixed layout
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.
