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.