For A Beautiful Web

I was lucky to be sent a preview copy of Rachel Andrew's soon-to-be-published book Everything You Know About CSS Is Wrong!, published by those nice chaps at SitePoint. I'll be writing a full review later this week, but as the book is largely (almost exclusively) devoted to CSS display : table; properties, I couldn't wait to try out some of the techniques she advocates.

I should confess that, up until now, I have ignored CSS tables, largely because of a lack of support for them in Internet Explorer. Yes I know I normally make a big thing about web designs need not look exactly the same in all browsers, but when it comes to the fundamentals of a page's layout, I'm as straight as the corporate guy. Now that CSS tables have been implemented in Internet Explorer 8, it is definitely time for me to reconsider and to learn more about them.

Making me think differently about CSS tables is Rachel's aim in Everything You Know About CSS Is Wrong! As we'll see, she does a damn fine job.

The stability and reliability of table-based layouts was, for a long time, the main reason some designers chose to stick with HTML tables for layout [...] Using CSS tables for your layout will bring this stability to your CSS layout work. You’ll waste a lot less time fixing mysterious bugs and inexplicable behavior in even the latest browsers.

Support for CSS Tables

CSS tables have already been implemented in the majority of recent browsers including Firefox (from version 2), Safari, Opera 9.5 and now Internet Explorer 8. Of course this is an imperfect world and there is no support for CSS tables in either Internet Explorer 6 or 7. Rachel expertly describes ways to address this important issue and I'll cover more about what she recommends in my full review of Everything You Know About CSS Is Wrong!

Are CSS tables ready for prime time?

To find out whether I think CSS tables are ready for prime time in the way that she describes, I took the layout from a current project, abandoned floats for layout and replaced them with CSS display : table; properties to see what display challenges I faced along the way and where CSS tables could be best utilized. I had two more important rules for my experiment. I would not change my markup by a single character and I would accept only minor negative design differences.

Before you go any further, open two more tabs in your browser and pull up these two files:

• Demonstration XHTML/CSS design file using floats for page layout
• The same XHTML file but a CSS file utilizing CSS tables instead of floats

(As this project is not yet live I have removed the client's branding and content. Copyright: This design is not a template and must not be reused.)

Dissecting design elements

In the first example, each of these elements were laid out horizontally using floats:

• The primary navigation
• The two main content columns in each horizontal block
• The two latest news items in the third block
• The <p>, <ul> and <vcard> in the footer

I won't detail all of the markup and CSS I used as I'm sure they will be nothing new to you. Instead I'll take the core float techniques and replace them with CSS tables, starting with the navigation. Not uncommonly the main navigation is given meaning by using an unordered list.

<ul id="nav-main">
<li><a href="#">{Navigation}</a></li>
[...]
</ul>

Each list item is floated to create a standard horizontal navigation design.

#nav-main { 
overflow : hidden; 
width : 940px; 
padding : 10px 0; 
background : #4e7c92 url(bg-grad.jpg) repeat-x 0 0; 
}

#nav-main li { 
float : left; 
width : 185px; 
text-align : center; 
}

Given the well-documented fragility of floats and of course the need for float clearing, using CSS tables makes sense as it cures both of these ills.

#nav-main { 
display : table; 
border-collapse : collapse; 
width : 940px; 
background : #4e7c92 url(bg-grad.jpg) repeat-x 0 0; 
}

#nav-main li { 
display : table-cell; 
width : 185px; 
padding : 10px 0;  
text-align : center; 
}

But what about replacing floats for structural columns, the scaffolding that supports almost every design?

.content { 
overflow : hidden; 
width : 940px; 
}

.content-main { 
float : left; 
width : 540px; 
}

.content-sub { 
float : right; 
width : 340px; 
}

Again, CSS tables solve the challenges of column dropping (due to over-with elements) and clearing but with one other major advantage; the days of struggling with equal height and faux columns are finally behind us.

.content { 
display : table; 
border-collapse : collapse; 
}

.content-main { 
display : table-cell; 
width : 540px; 
padding-right : 30px; 
vertical-align : top; 
}

.content-sub { 
display : table-cell; 
width : 330px; 
background-color : #f8f7f3; 
padding : 15px 15px; 0 15px; 
vertical-align : top; 
}

Compare the two examples again. Using CSS tables the right column now has a grey background that extends to the full height, equal to to the taller left column. Magic. A little added border-radius : 10px; and the page instantly appears better structured.

The same CSS table properties are also implemented in both the latest news and the footer content, proving that CSS tables are reliable for creating columns from all elements, not just divisions.

li.hentry { 
display : table-cell; 
width : 240px; 
padding-right : 60px; 
}

li.hentry:last-child { 
padding-right : 0; }

#siteinfo { 
display : table; 
}

#siteinfo p { 
display : table-cell; 
width : 220px; 
padding-right : 80px; 
}

#siteinfo ul { 
display : table-cell; 
width : 300px; 
}

#siteinfo .vcard { 
display : table-cell; 
width : 340px; 
}

Problems with positioning

If you are paying close attention, you will have noticed a small design difference between the display of the latest news items between my two examples. As Rachel so expertly describes in Everything You Know About CSS Is Wrong!

when setting position: relative; on an element that also has a table-related display value specified, the positioning is ignored. This behavior has previously been documented by Alastair Campbell, who points out in his article that the CSS 2.1 spec is not clear on what browsers should do when an element displaying as a table element is relatively positioned.

I won't steal Rachel's thunder, needless to say that she describes several workarounds for this positioning problem, or you could do as I do and design around the problem.

You will still need floats and positioning

If you do choose to steer your CSS in the direction of CSS tables, you will still need floats and positioning. CSS tables could not transform my unordered list of Flickr thumbnails into the tight grid that I want for this design and so the floated list items remain. That's OK though, as for interface elements like this, floats remain the right tool for the job.

Excited again

I have to say that I'm excited about CSS tables. It's not very often these days that a CSS technique, particularly one that has long been a part of CSS2.1, has me reconsidering how I lay out my pages but Rachel has achieved a lot in only few hours with her book.

I will write a more detailed review of Everything You Know About CSS Is Wrong! in the next few days. But until then, my brain juices are flowing with possibilities. But what about you? Do you think that CSS tables are ready for prime time?

Posted by Andy Clarke on 07/10/08.