This article, while well intentioned, misses the point it was trying to prove. The article gives an example of a three column layout with two different orderings of the <div>'s in HTML to prove "ordering doesn't matter". The problem is the CSS in the examples changes along with the re-ordering of divs. This is exactly the point it was trying to disprove.

Though the coupling between CSS and HTML is loose it's not quite loose enough to allow HTML to be arbitrarily reordered and maintain the same presentation without also modifying the CSS.

You're right, I misread Joel's quote & I'm grateful he took the time to clarify. This doesn't make it any less possible. For example:

http://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-or...

http://www.jemjabella.co.uk/junk/rearrange/abs-columns-out-o...

Same CSS, re-ordered columns.

Although for the record, I dislike the technique used to achieve the results. As the person above you said - just because it's possible it doesn't mean it's any good!

Out of curiosity..

Is there a fun story behind your website's headline: "Jem Jabella - Ultimately Better Than You" ?

jemjabella was nickname given to me about 10 years ago, and the tagline is intended as humour.

I use it as a measure of whether or not people should read my site... i.e. if you find it funny, or are able to ignore the blatant egotism, then you would probably be OK reading my site. If it winds you up or gets to you, then you won't like the content and you should read at your own risk. :)

> the tagline is intended as humour.

I see.. :p

Could you explain the joke to me?

I also think it's funny that the simple 3-column example that took you 30 minutes to put together has exactly the same shortcomings that are discussed in the original article (for instance, try setting the background color of one of the sidebars or swapping their order in the markup without changing the CSS).

It's true that you can order the markup however you want and write the CSS to make it look right, but the key point is recognizing that (unless you position everything absolutely) there is still no true separation between the markup and the CSS (at least where layout is concerned). If they were truly independent, then it wouldn't matter what order the elements appeared in the markup... the CSS would lead them to render the same way on the screen every time.

It's worth pointing out that there is true independence between the markup and CSS where styling is concerned (and this is where CSS shines). If you style the background, font, opacity, whatever of a particular element and then move that element to a different location within the markup, the element will still look exactly the same (unless the new position in the DOM subjects it to other CSS rules that override the old ones).

I'm rambling a bit here, but all I'm really trying to say is that CSS has its place in the web development toolbox, but old-school tables often have the edge when looking for a layout that just works.

Please everyone read the second paragraph of brents insightful comment.

Another place where tables have the edge: when a new browser version comes out, css layouts are often broken, especially if they rely on hacks.

"I think the fact that it took you (a CSS pro) 30 minutes to come up with a simple 3 column example that's hard for me to understand"

Not to mention the fact that he only tested in FF. The real nightmare starts when you have to make it look good on IE too.

Did you test it in IE before you made that comment?

I ask because I'm now at work, and have access to a windows box with IE6 installed. Lo and behold, my examples work EXACTLY the same as they did in FF3.

No nightmares involved. :)

Not to mention, the "in order" example he gave doesn't scale with the width of the browser and only works for fixed width.

There is only one way in CSS (without js) to do a layout where there are two fixed width side bars on either side and one center content area that grows/shrinks with the width of the browser window and that is the "out of order" way (two floats, one non-floating div with margin-left, margin-right equal to left,right sidebars' widths), which coincidentally, he also screws up via the use of relative positioning and 3 floats.

It's "she", if you don't mind; and nobody asked for a fluid layout. You're trying to point out flaws in an example designed to prove a totally different point.

I apologize. While I understand the point you are making in the article, I disagree with this statement:

"You can order your content how your like. You are restricted only by your knowledge of CSS and not its ability as a styling language to render your documents. "

I will retract what I've said if you can demonstrate a fluid 3 column layout using only those 3 divs (left, right, center) where the center column expands with the browser, the sides remain constant width, and the order is preserved. This is trivial using tables.

Css tends to show its rough edges when you use it outside of a fixed width or absolutely positioned environment.

Am I the only one who gets scope creep on rethorics like this? And we joke about clueless project managers... :)

Afaik, the exact challenge you're proposing can be done with something like:

.a,.b,.c {position:absolute;} .a {left:0;width:200px;} .b {left:200px;right:200px;} .c {right:0;width:200px;}

Before anyone adds new requirements, consider these ones: it has to be emailed and in the printout, the columns should look like tabs above the midle area.

In all seriousness, sometimes requirements are inane, pointless and unreasonable and you just have to push back and say it can't be done.

I think CSS detractors tend to obsess over specific points that tables can handle normally, but often leave out real life situations where obsessive alignment is not necessarily the biggest of the problems. Bias (in this case towards css vs tables, as opposed to web dev in general) is an interesting phenomenon.

Again, you're after something totally other. Why should I waste my time trying to demonstrate something that has nothing to do with my original aim?

I'm working on an unfamiliar system, with unfamiliar tools, and doing several things at once - all whilst dribbling snot over my keyboard - but I'll be sure to narrow it down to 10 mins next time. :)