Moving to CSS-based layouts with the YUI Library

While initiating a recent project to make substantial changes to an existing Web application, it was decided to dump the table-based layout used in its original design in favor of CSS. We opted to use the Yahoo! User Interface (YUI) Library after evaluating different approaches. The YUI Library provides core CSS resources that have been developed by a professional team of developers and extensively tested by the Web community.

This tutorial walks you through the steps of how to move from a table-based design to a CSS-based layout with the help of the YUI Library.

The layout

It is worth considering the division of screen real estate in the application to understand how it is coded using both tables and CSS. The overall page is divided into two horizontal sections: a header and a body.

The header portion can be further divided into three horizontal strips. The first strip contains a strip of color at the top. The middle row contains text and a logo on a white background. The final row has its own background color along with a breadcrumb.

The body portion of the page is divided into two columns. The first column is a navigation area featuring a list of navigation links. The second column is divided into two rows with a small footer row at the bottom, and the rest is devoted to page content.

The site design does not change from the original product developed with Dreamweaver and HTML tables. The introduction of CSS will deliver cleaner code with a smaller footprint and simplified maintenance.

Table-based layout

The original design used six HTML tables to divide the page and deliver the solution. It used CSS to style text on the page, but CSS usage stopped at that point. The following listing includes the HTML source. Background colors are assigned to each table (via the bgcolor attribute) to provide a visual cue of the layout.

<html>
<head><title>Table-based page layout</title></head>
<body>
<table bgcolor="yellow" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
<tr><td colspan="3" width="100%"></td></tr>

<tr><td colspan="3">
<table bgcolor="red" border="0" width="100%" cellspacing="0">
<tr>
<td width="85%" valign="middle">Header Text</td>
 <td width="15%"><img src="logo.jpg" mce_src="logo.jpg" /></td>
</tr></table></td></tr>
<tr>
<td width="16%" height="20" nowrap>Breadcrumb</td>
 <td width="40%" height="20" align="right" nowrap></td>
</tr>
<tr>
<td width="10%" rowspan="2" valign="top">
<table bgcolor="green" width="101%" height="100%" border="0" cellpadding="0"
 cellspacing="0">
<tr>
<td height="167" valign="top">
<table bgcolor="light blue" width="100%" border="0" cellspacing="0">
 <tr><td colspan="3">Menu</td></tr>
<tr>
<td width="8"> </td>
<td>Nav Link</td>
<td width="4"> </td>
</tr></table></td></tr></table></td>
 <td height="100%" colspan="2" valign="top">
<table bgcolor="brown" width="100%" height="100%" cellpadding="0" cellspacing="0">
 <tr><td valign="top">
<table bgcolor="silver" width="96%" height="220" border="0" cellpadding="10">
<tbody><tr>
<td valign=top align=left width="100%">
 <p>Content goes here</p>
</td></tr></tbody></table></td></tr><tr>
<td height="40" valign="middle">
Footer
</td></tr>
 </table></td></tr></table></body></html>

The table-based layout solution delivers the desired results, but it can be confusing to make layout changes. A quick perusal of the code demonstrates the confusing nature of using tables for layout.

It takes time to make layout changes and to convert a table-based solution to a CSS alternative, so selling such a change to a client can be daunting. In our case, the client was technically savvy and easily convinced when we showed the simplified approach offered by CSS.

YUI Grids CSS

The use of the YUI Grids CSS feature of the YUI Library added another level of acceptance via a tested solution. YUI Grids CSS provides a CSS solution for delivering page layouts that divide the page into areas.

A great aspect of the YUI Grids CSS feature is its A-level browser support, which provides the highest support level in terms of browsers. This means you don't have to worry about the quirks in different browsers when using CSS for layout.

CSS layout

YUI Grids CSS offers preset page widths and templates, along with the ability to nest and stack layouts to generate what you need. Yahoo boasts the capability to deliver more than 1,000 layout combinations with it. YUI Grids CSS is part of the YUI Library download.

We used the following features of the YUI Grids CSS feature:

The 100% page width is employed via the doc3 id attribute assigned to the overall <DIV> container.
The entire page is divided into three rows using three <DIV> elements. The YUI Grids CSS standard id attributes for header (hd), body (bd), and footer (ft) are used.
The header has three rows using two <P> elements and a <DIV> element. The <DIV> includes another <DIV> that uses YUI Grids CSS features. This includes the 100% page width (doc3 attribute), as well as a preset template that has two columns with the narrower column on the left with a width of 180 pixels. The narrower column is assigned the class id of yui-b with the larger column assigned the yui-main attribute. The two columns are used to ensure the breadcrumb appears above the content area of the page.
The middle or body row of the whole page layout is divided into two columns with a left column width of 180 pixels. This is accomplished with a predefined template employed by assigning the yui-t2 class to the body's <DIV> container. The smaller left column is designated with the yui-b class assignment, and the main area is designated with the yui-main class assignment.
The footer row uses the same approach as the body with two columns — a left column of 180 pixels.
The smaller left column of the body row of the page contains a navigation menu. The menu is created with an HTML unordered list and styled via CSS.
The YUI Grids CSS is contained in one CSS file available in the YUI Library download. The file is called grids.css and has a small footprint of 4KB.

Here is the source of the reworked page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Reworked with YUI Grids CSS</title>     
<link rel="stylesheet" type="text/css" href="grids.css" mce_href="grids.css">
 </head>
<body>
<div id="doc3">
<div id="hd">
<p class="header1"></p>
<p class="header3">
<span>Text</span>
 <span class="logo"></span>
</p>
<div>
<div id="doc3" class="yui-t2">
<div class="yui-b"></div>  
<div id="yui-main">
 <div class="yui-b">Breadcrumb</div>
</div>
</div>
</div>
</div>
<div id="bd">
<div id="doc3" class="yui-t2">
<div class="yui-b">
 <ul class="nav">
<li class="main">Menu</li>
<li class="sub">Nav Link</li>
</ul>
</div>  
<div id="yui-main">
<div class="yui-b">
 Content goes here
</div>
</div>
</div>
</div>
<div id="ft">
<div id="doc3" class="yui-t2">
<div class="yui-b">
</div>  
 <div id="yui-main">
<div class="yui-b">

Footer
</div>

</div>

</div>

</div>

</div>

</body></html>

You may cringe at the sight of so many <DIV> elements, but this is much easier to follow compared to its table counterpart. Also, the CSS approach allows you to easily modify the layout by editing the CSS or changing what YUI Grids CSS features are used.

For example, we could easily modify the layout to use a layout with a left column of 160 pixels by changing the class assigned to the <DIV> elements from yui-t2 to yui-t1. In order to use this approach, you need to be familiar with using YUI Grids CSS.

There's a caveat to working with the free CSS elements of the YUI Library: It's tricky to alter the source CSS. The code contains many so-called hacks in order to work with all browsers that you may not be fully aware of all of them when you're editing the CSS. For me, I avoid working directly with the source and work within the confines of the YUI Library.

Making the switch

CSS has matured to the point where using it for layout is now acceptable. However, this approach does have pitfalls, which include browser quirks. For this reason, I find the freely available YUI Grids CSS portion of the YUI Library to be an excellent resource for building Web interfaces that use Web standards.

Are you embracing CSS for Web page layout? Do you use any aspect of the YUI Library in your applications? Share your experiences with the Web Developer community.

Additional TechRepublic resources about the YUI Library

Date: March 17th, 2008
Author: Tony Patton

Search This Blog

Tools & Technologies IT