I had to edit this a little for sense. Apparently, I'm not at my best at 4 a.m.
For designers who are used to tables, the most frustrating thing about CSS isn't learning new markup or memorizing new style rules. No, the most difficult thing is changing the way we think about designing and building pages.
In a recent comment on this blog, Dave Child said something that stuck out for me and has stuck with me ever since. He said I was still thinking in tables instead of boxes. This comment has been troubling me. I can't stop thinking about it--because it's true, and I can't figure out how to get around it.
Well, this morning at 4 a.m., I suddenly woke up from a dead sleep and understood. Maybe that's an odd time to have a Light Bulb moment, but I'll take them when I can get them.
So, here's the difference bewtween table and box layouts, as my sleep-addled mind perceives it:
Table layouts are one-dimensional. We build them in a way similar to how we read--from top to bottom and left to right.
Box layouts are three-dimensional. They're built from the outside in, like a Kindergarten collage project--by layering boxes alongside, within and across one another.
Yes, tables can be nested, too. But tables are always subject to the height and width of their containing cells. (If your first row is 100px high and 640px wide, you can't place a 300px by 200px element in the second cell of that row.) Boxes, on the other hand, are layered. So while they frequently do reside inside another larger box, they don't have to. You can layer any size box you want on top of any other box.
To really be able to use CSS to its full potential, I've got to stop thinking in rows and columns. There aren't any rows or columns in box layouts. For anyone used to working with a layout grid, this can be disconcerting. But think of this--if I were laying out a print design, I wouldn't be restricted from crossing grid lines. I'll plop stuff down anywhere I damn well thought it looked good. I would mentally accept that the grid was imaginary--just a guide. That's what I need to do with CSS.
Whoosh. Okay. I think I've finally got it. And it only took me about 7 months and five web sites. Now, maybe I can go back to sleep.
