Header

Column One

Filler

Filler

Filler

Filler

Filler

Filler

Filler

Filler

Filler

Column Two

Filler

Filler

Filler

Column Three

Filler

Filler

Filler

Column Order

Widths of flanking columns

The width of the longest column is calculated automatically. The left and right here refers to which of the other columns is leftmost or rightmost. NB. If the longest column is not in the center, you may not mix the units - ie. both types of units must be the same, either pixels or percentages.

Spacing

Misc

 

Valid XHTML 1.0 Valid CSS Public Domain Dedication

Back to CSS index

It has come to my attention that people are flagging up this page.

Here's what I posted to the css-discuss list almost immediately after my initial all-too-soon-pride-comes-before-a-fall announcement back in February.

>PRODUCT RECALL - 3COL_ORDEREDABSOLUTE.MHTML
>
><http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml>
>
>WARNING - THIS LAYOUT MAY BURST IN TO FLAMES IN IE6
>
>
>In short, if padding is set on the columns, in some column orderings, the
>lefthand column gets shunted to the right by the amount of padding.
>
>I could have sworn this didn't happen in my version of IE6 but I've packed
>away the box in order to do some work on my flat so I can't check. And
>won't be able to for a couple of days. (How foolish was that releasing it
>just now?). No doubt I just overlooked a particular test case. Or two.
>
>So, in the meantime I suggest that people leave well alone and not use for
>production. Feel free to play around though and figure out what the latest
>IE6 problem is.

And of course, a few days has turned into almost a few months. Even though the fixes should be relatively trivial.

Worse, I overlooked/forgot the fact that subtle changes to the html are required (and made) for the different orderings depending on which column is flagged as longest. Which means that the claim to be an any order layout is true only for certain values of strictness - and renders the layout useless if you can't guarantee which column will be longest. Again this is eminently fixable - I predict I'll be sorting it out by Christmas 2007.

There - you have been warned. The float model versions are much cooler in any case and they even work with Netscape 4.

Oh and one last thing - this really isn't meant to be a layout builder though you are free to use it as such - it's purpose is to act as a demonstration of what is possible in css and to show that there's much more that can be done than just relying on the current linked to from everywhere layouts. And there really is no substitute to rolling your sleeves up and getting messy with the code. That's what this page (and others) allowed me to do - to test variations, see their effects, and figure out workarounds.