SitePoint : Empowering Web Developers Since 1997

Kevin Yank

Kevin began developing for the Web in 1995 and is a highly

respected technical author. He wrote "Build your own

Database Driven Website using PHP and MySQL", a

practical step-by-step guide published by SitePoint.com, and he's editor

of the SitePoint Tech Times, a bi-weekly newsletter for technically-

minded Web developers. Kev believes that any good Webmaster should

have seen at least one episode of MacGyver.

Kevin Yank has written 66 articles for SitePoint with an average reader

rating of 8.9.

View all articles by Kevin Yank...

Exploring the Limits of CSS Layout

By Kevin Yank

September 2nd 2003

Reader Rating: 7.6

http://www.sitepoint.com/print/1213 (1 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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.

http://www.sitepoint.com/print/1213 (2 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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;

http://www.sitepoint.com/print/1213 (3 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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

http://www.sitepoint.com/print/1213 (4 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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.

JavaScript to the Rescue!

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.

http://www.sitepoint.com/print/1213 (5 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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:

http://www.sitepoint.com/print/1213 (6 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

<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 =

http://www.sitepoint.com/print/1213 (7 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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!

The Future

But how about the future? The working draft of CSS3 includes multi-column

layout module, but it is designed for flowing text across columns of equal

http://www.sitepoint.com/print/1213 (8 von 9)08.09.2003 22:03:19

SitePoint : Empowering Web Developers Since 1997

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.

Article Sponsor

Build Your Own Database Driven Website

Using PHP & MySQL

Kevin Yank (the author of the article above) is also

the author of our top-selling book...

Check it out now!

DOWNLOAD THE SAMPLE CHAPTERS FOR FREE!

The contents of this webpage are copyright © 1998- 2003 SitePoint Pty. Ltd. All Rights Reserved.
Content Management System by Editize - Web Design & Development by sitepoint.com.au - Expired
Domain Names

http://www.sitepoint.com/print/1213 (9 von 9)08.09.2003 22:03:19