In This Issue...

New from SitePoint:
The Web Design Business Kit

• a 450 page manual (ringbound, letter sized), your complete guide to runnnig a wildly successful Web design business!
• a 200 page binder of business documents, customer contact letters, surveys, and more!
• a CD-ROM containing the editable, electronic versions of all of the documents for your immediate use!

Introduction

Settling back into office life this week, I have a stupid amount of work to do. Nevertheless, when longtime SitePointer Eric Jones sent me an instant message seeking help with his CSS frustrations, it got me thinking...

With the success of our latest book, HTML Utopia: Designing Without Tables Using CSS, many of our readers (perhaps you?) have given some thought to moving their heavy table layouts over to lean, mean, standards compliant CSS. Those who have attempted such conversions may have come away frustrated and disillusioned (much as Eric Jones did), having run into the limitations of current CSS layout technology.

The biggest source of frustration on this front is the multi-column layout, which is the cornerstone of present day Web design. Sadly, CSS just wasn't designed with this type of layout in mind.

In this issue's Editorial I'll explore this weakness of CSS in depth, show the most common work-around, and point out the problems that exist with it. Then in the Quick Tip, I'll solve those problems by bolstering the CSS with a smattering of Dynamic HTML.

Happy Reading!

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Editorial

Exploring the Limits of CSS Layout

With major sites like Wired News and ESPN migrating to CSS layout, the "new wave" of Web design is truly here. But even in the most modern browsers, CSS has its limitations. Understanding them can save you a lot of frustration and wasted time.

For better or worse, the vogue of Web design has evolved to favour a layout similar in style to a newspaper. Common design elements include:

• a header and footer that each spans the page horizontally
• content constrained by page width
• vertical scrolling is acceptable, within reason
• navigation and secondary content in vertical columns next to the main content

That last one is the real kicker. The sad reality is that the current CSS specificaton (CSS2) was not designed with multiple columns of content in mind. As a result, just as Web designers have always had to abuse HTML tables to achieve complex page layout, they must now abuse CSS positioning to achieve those same ends.

This is a controversial position to take, I'll admit. Right now, all signs point to CSS as the ideal way to perform page layout for the Web. Unfortunately, the CSS2 spec (finalized in 1998) predates many of the complexities of present day Web design, the strong fashion of multi-column design chief among them.

Shown here is the classic three column design with header and footer, the most basic expression of current Web layout fashion. This is of course dead easy to accomplish with HTML tables, but you're better than that!

To achieve this in CSS, we begin with a natural three-block page. Blocks, incidentally, are simply <div> tags in the HTML code. By "natural" I mean that we don't do anything special to the blocks to get them into this layout -- the browser will naturally stack the three blocks vertically, each occupying the width of the browser window.

Next, we make room for the left and right columns by adding margins to the content area. This is the distilled CSS code:

#content {
  margin-left: 100px;
  margin-right: 100px;
}

Finally, we add the left and right columns as absolute-positioned blocks:

#left, #right {
  position: absolute;
  top: 100px; /* height of the header */
  width: 100px;
}

#left {
  left: 0;
}

#right {
  right: 0;
}

Not far from the desired effect, right? There are just two problems with this result:

• The left and right columns do their own thing in the height department. CSS provides no way to match the heights of the columns without setting a fixed height for all three -- rarely a feasible option!
   
• Since the absolute-positioned left and right columns float above the rest of the page, the position of the footer is still determined solely by the height of the content area. This causes problems when the content column is shorter than the other columns.

If you're dealing with solid background colors in all the columns, the former may not be a problem for you. The latter, however, is the biggest headache faced by new practitioners of CSS layout. This problem is a direct result of the lack of multi-column support in CSS2. As designers, we shouldn't have to resort to absolute positioning to create a multi-column layout, but CSS2 doesn't have anything better to offer.

For now, the best solution is to use JavaScript to equalize the column heights after the browser performs the initial layout. This is the technique we use on sitepoint.com, and I've demonstrated it in this issue's Quick Tip.

But how about the future? The working draft of CSS3 includes a multi-column layout module, but it is designed for flowing text across columns of equal width, not for newspaper-style layouts with varying columns widths.

The best bet for pure CSS multi-column layouts that I see on the horizon is the display-model and display-role properties in the CSS3 box model. In a particularly ironic twist, these properties would let you set the column blocks to behave as table cells for the purposes of layout. Design techniques would come full circle while still preserving the content/style division of CSS layout.

Get Thawte's New Step-by-Step SSL Guide for MSIIS

Quick Tip

Equalizing Column Heights

As I discussed in this issue's Editorial, creating columns of equal height is beyond the abilities of current CSS layout standards. Fortunately, a little JavaScript comes to the rescue in this Quick Tip.

So following the examples in the Editorial, we'll assume you have a page with three columns. The center column uses natural (i.e. static) positioning and includes margins that leave room for the left and right columns, which use absolute positioning. The id attributes of the column <div> tags are left, content, and right.

Instead of dealing with the differences between browsers, we'll leave it to the professionals and use the excellent X script from Cross-Browser.com. Simply download x.js from that site and load it in the <head> tag of your page as follows:

<script src="x.js" type="text/javascript">
</script>

Now, because the footer may well be covered by the left and right columns when the browser lays them out, we'll want to keep the footer invisible until we've adjusted the column heights. Make sure the footer <div> has id="footer" set and add this style rule to the <head> tag of your document:

<style type="text/css">
#footer {
  visibility: hidden;
}
</style>

Now, when the browser has finished loading the page (and whenever the browser window is resized), we want to find out which of the columns is the tallest and resize them all to that height. Then we can display the footer.

Because this process may happen repeatedly as the user resizes the browser window, we need to wrap the content of each column in an additional <div>. The structure of the document becomes:

<div id="left">
  <div
id="leftcontent"><!--left--></div>
</div>
<div id="content">
  <div
id="contentcontent"><!--content--></div>
</div>
<div id="right">
  <div
id="rightcontent"><!--right--></div>
</div>

It is these "inner" <div> we will check for the natural height of each column before setting the height of the "outer" <div>.

Here's the JavaScript function that adjusts the layout using the X library's xHeight and xShow functions:

<script type="text/javascript">
function adjustLayout()
{
  // Get natural heights
  var cHeight = xHeight("contentcontent");
  var lHeight = xHeight("leftcontent");
  var rHeight = xHeight("rightcontent");

  // Find the maximum height
  var maxHeight =
    Math.max(cHeight, Math.max(lHeight, rHeight));

  // Assign maximum height to all columns
  xHeight("content", maxHeight);
  xHeight("left", maxHeight);
  xHeight("right", maxHeight);

  // Show the footer
  xShow("footer");
}

All that's left is to make this function run when the page is loaded or resized. This is done with xAddEventListener:

window.onload = function()
{
  xAddEventListener(window, "resize",
    adjustLayout, false);
  adjustLayout();
}
</script>

And that does it! See it in action for yourself!

Help Your Friends Out

Download Kev's PHP/MySQL Tutorial

• The pure ideal of XHTML+CSS design?
  in CSS
  
  
• Flash Player 7 public beta
  in Flash and Actionscript
  
  
• What is RSS and why should I care?
  in PHP
  
  
• Enterprise PHP
  in Advanced PHP Programming