Recently there have been some bloggers writing about and commenting on the age old debate of tables vs. CSS for layout. In once such post, the author drank the so called “css kool-aid” and woke up with a headache from “banging his head against the CSS wall.” Another site claims to have “scientifically determined” the maximum amount of time that you should need to make a layout work in CSS; 47 minutes. They even have a timer that you can use when you are creating a CSS based layout. I did find out that the site was created out of boredom and as an inside joke between several developers that work together. When I read that, I smiled and thought “good one!”

Being a front-end developer myself I find this topic both interesting and amusing at the same time. The topic has been argued and debated to death over the years. I’m not here to do that though. I’m simply trying to answer a colleague’s question “how do you feel about this?” This being the give up and use tables mentality.

The advantages of CSS based layouts, or better put, the development methodology of separating structure from presentation from behavior, are well known. I’m not going to go through them. But I will say that the learning curve can be relatively steep for newcomers, especially those who have done table based layouts in the past. The temptation is to “give up and use tables” because that is what is most familiar.

To these people, I say “go right ahead.” If you can get the job done in half the time using tables for layout then you’ll be saving yourself lots of time. It won’t make you a bad person and you won’t be doing any disservice to humanity. So don’t worry so much about it. It will make your site harder to maintain, and your pages will be a heftier download for the user, and, oops, I said I wouldn’t go there.

I will also say to these people, “don’t give up on using CSS for layout just yet!” You simply can’t learn CSS from scratch in one day or even one week. It just doesn’t happen that way. Once you learn how to leverage CSS based layouts, it won’t take much time to put one together. It’s the details, intricacies and variances in a design that require extra attention and more time, but that holds true no matter what method you use for page layout. But, if you can commit and be dedicated to learning CSS, you’ll embark on a learning process that will give you a renewed desire to do things better, a sense of web craftsmanship, and a greater sense of pride in your work. You’ll expand your skill-set and become better at what you do, which will ultimately make you more marketable. You’ll eventually be able to put together a CSS based layout in no time at all and you’ll soon start seeing and experiencing all the advantages that come with it.

So either path you decide to pursue I wish you luck. It is my hope though that you would choose the latter path and be willing and dedicated to go the extra mile. I guarantee that you won’t look back with regret.

Here are some tips that have helped me along the way:

1. Use the right markup for the job
   Meaningful markup is what gives CSS it’s true power. Use div tags to group areas of the page together, use heading tags for headings, use list tags for various types of lists, etc. It’s really pretty basic stuff.
2. Reset your CSS
   The purpose of a reset stylesheet is to remove the inconsistent default styling of HTML elements, which creates a level playing field from browser to browser. There are many CSS resets out there, the most popular of which are Eric Meyer’s Reset CSS and Yahoo’s YUI Reset CSS. I personally use a slightly modified version of Eric Meyer’s reset.
3. Use a clearfix class
   If a containing element contains floated elements, the containing elements dimensions do not automatically expand to surround all the floated elements. The reason for this is in the W3C spec but essentially content needs to be able to flow around floated elements. The clearfix class can be found here. See update below.
4. Organize your stylesheet(s)
   As your stylesheet begins to contain more and more rules, things can start to get tough to find. Organize your rules by relationship and context, by section and/or page. If necessary, break apart your stylesheets into several files to make maintenance easier.
5. Code for the best browser, then fix for the broken ones
   Today, the best browsers are Safari and Firefox. Internet Explorer however, is the most used browser but it comes with many rendering inconsistencies, especially version 6. If you design your CSS to the standard first, then fix the issues that are specific to older browsers, your code will ultimately be more supportable in the future.
6. Know the limitations of IE
   If you are aware of the CSS bugs that are only found in IE then you will know exactly how to fix them when they occur. Even better, you’ll be able to anticipate these bugs as your are designing your CSS, and can immediately apply a fix so that it’s taken care of. For more details check Explorer Exposed! at Position Is Everything.

For more tips read CSS: It’s not that hard, at Unmatched Style.

Update 3/18/09: Last night I found out about an alternative to the clearfix class. Something so painfully simple I wondered why I hadn’t ever heard about it before. It essentially uses overflow: auto on the containing element. Viola, easy clearing, with no special class name required! I think I’m going to start using this technique right away. Read more here.