That said, while CSS has warts aplenty, it is still better than not having it, and I try to utilize it in as many scenarios as practical. However, I don’t for one moment deceive myself into thinking that there aren’t a handful of situations for which use of some old non-CSS techniques are still preferable. CSS gets a grade of C+.

FWIW, you’re probably more of a CSS expert than me. Being a guy on the Dreamweaver team who implements CSS and goes to W3C meetings doesn’t mean squat when it comes to using CSS. Being a designer in the real world counts much more.

I personally feel that float is the wrong thing for defining layout of this type. Unfortunately, there’s nothing else better.

The CSS pseudocode is pretty ugly, I agree. The basic concept underneath is pretty simple, but the @ syntax makes it hard. (Bert Bos sent me mail that Dave Raggett had apparently suggested something very similar many years ago).

Here’s the basic concept:

Layout should be defined in the CSS, not the the HTML. This includes things like separating the order in the HTML document from the order in the final layout, which can’t be done in CSS today.

I personally like boxes and glue for layout. Maybe that comes from being in grad school and using TeX. Anyway, in a containment model, you tend to create layouts like this (in XML pseudocode):

<vbox>
   <topItem>
   <hbox>
      <leftItem width=”150px” />
      <rightItem width=”auto” />
   </hbox>
</vbox>

When you render that in @ rules, it gets messy.

Anyway, it might not be the right idea, but I think that it would be great for someone to come up with something other than the current regime of float, et. al. to define layout.

Again, thanks for the thoughtful comments!

I’m no programmer, strictly front end to be honest, but I’m pretty good at CSS. I don’t really have the pedigree that you have with the W3C CSS working group, but I’ve got a great deal of working knowledge. I cut my teeth on CSS layouts by learning how to do it trial and error (and a few good books I’ll mention at the end here) making UI’s and GUI’s for a call center software development team. From photoshop to the CSS, if you think three column layouts are hard or float abused, try a seven column layout with collapsing and expanding, all tabless. Three columns are a breeze now, but your right, float’s are abused. The issues you mention above are jsut the tip of them, try cross browser checking and watching your floated three column layout go to hell and back. I’m sure you have, haha, and your blog looks great, so I’m not talking about you specifically so we’re clear. Anyways!

(I ramble, I’m sorry, lol) I’m not entirely sure where your going up there with the psuedo code, but I don’t think I’m a fan, it looks more complicated than things need to be. You mention you like this because you like to think about CSS layout in terms of containers and not slots, and maybe I don’t follow, but I figured you could only think of CSS layout as containers with hooks for your styling needs. I am probably not thoroughly understanding your slot mentality, so if you could I’d love to know what you meant by this.

You bash pretty badly on floating, and I understand entirely, lol. I’ve been there, in the beginning, when floating becomes this monster that is out of control, and tables suddenly look like your best friend again. But that all being said I’d like to say that after some teeth cutting, its not nearly as hard as you think, and that floating is something everyone, -everyone- gets blasted on, its mind bendingly hard, because well, the concept of floats are a mind fuck when you come from table based layouts. None of the gurus blame you for blasting the floats so badly, haha. I do hope that from here you’ve pursued it more and see that it’s not so bad.

You spke above in your comments about display: table and how we all have it stuck in our heads that tables are for tabular data. Well, your right, they are for tabular data, but not all of us have it stuck in our heads. I’m a bit of a purist, so I agree with that statement, that tables should only be used for what they were intended for in the beginning, being containers for tabular data, not visual helping hands. You’ve got two spectrums here, and I’m thinknig your leaning more toward the second I’ll mention here, but one i see is the purists. Those of us who are all about the standards, the screen readers, the proper clean markup, and semantics. Thats where we all get our heads stuck on the whole table thing, semantics. Everything on that page means exactly what its there for and marked up as, and nothing else, and we use those elements to style the page. The other wing is going to be people who are tired of the failures of tables and the needless markup, but don’t care about all the tape surrounding the purist mentality. My two cents on the table though, which is I don’t agree that everything is fair game.

To Bonz, I started out as a graphic designer before I ever even cracked open an HTML book, so the look of a website is extremely important to me. To this day, I haven’t had any issues with CSS layouts inhibiting my creativity in any way. I design the same way I did when I was slicing everything up in photoshop and using the tables it pumped out, except now I slice things differently to fit, and thats my point, its really all thats needed, to see where the containers are, how they fit together, and slice your graphics accordingly. I see even less red tape now than I did when I was doing table design, and I see tons more flexibility and accessibility when I use CSS designs.

Just my two cents, go out and add a dollar to it for a coffe ;). By the way, a great great book that covers alot of issues from brand new css designer to guru css designer issues is CSS Mastery. Awesome stuff to help ya through alot of these issues. Good article Sho. Thanks for the read!

- Ken

I seriously don’t like the way css layouts look. They all look like they’re missing something. The reason for this is that I think that CSS layouts are so difficult that art is hard to integrate in with them after you wind up spending needless hours trying to arrange things.

It’s most likely that my brain has been accustomed to the tables based web, but even at CSS Zen Garden, I’m not entirely impressed by the offerings of ‘artists’ on there. I’m not trying to speak as if I’m a snob, I’m not that much of an artist, but this crap is seriously getting in the way.

It makes me reconsider web development and maybe just publishing a damn magazine every month. The internet is a difficult medium to work with that hasn’t matured and I’m more than certain that it will never mature. I’m tired of web standards crap and constantly having to learn how to do things. It all takes away from the content itself.

People go on the internet for content. Whether it’s art, text, audio, or video. Myspace was ugly as hell when it first started and still is ugly today. People continiously go to it for it’s basic functionality. They have control, they don’t have to spend hours learning web programming and other crap to distribute comments, share photos, and more.

I love the idea of having customizability and power, but all of this is sucking away from my content generating abilities. I’m tired of the red tape.

The harder issue is that the structure of the HTML tags is still important in getting tables to look the way that you want. It is quite typical to have an HTML document which looks like this:

<div id=”header”/>
<div id=”main”/>
<div id=”nav”/>
<div id=”footer”/>

If you want the navigation to appear on the left, you can do this with float, but not with tables. And in fact, I am not 100% certain you can use display: table to make things work even if the navigation goes on the right, since you would need a tag to attach the table row to. (It would have to wrap the “main” and “nav” divs).

Of course, most float based layouts also dictate tag structure to some degree, which is another clue that float based layouts are “cheating”.