Appendix EAny Order Columns - an alternative approach

Philippe Wittenbergh suggested a possible workaround for the Gecko 1.8b2 bug - and what do you know, it's the basis for a whole new alternative way of doing any order columns. Up to a point.

How?

Each column is still floated, but we:

  1. add position: relative
  2. substitute left for margin-left. The value of left for block n is worked out so:
    1. determine the position of the leftmost edge of the block
    2. add up the widths of any block that precedes it in the source
    3. subtract the total of the widths from the leftmost edge

The following CSS gives us our standard 2-1-3 ordering:

#block_1
        {
        position: relative;
        float: left;
        width: 34%;
        left: 33%;
        }
* html #block_1
        {
        display: inline;
        }
#block_2
        {
        position: relative;
        float: left;
        width: 33%;
        left: -34%;
        }
#block_3
        {
        position: relative;
        float: left;
        width: 33%;
        }

Interactive example of the alternative Any Order technique

Half an alternative

This works fine in modern browsers with the equal height method, but because of the position: relative applied to the columns, it can never be souped up to be used as the underlying chassis for the vertical grid.

Of course, if you don't have any need for vertical grid-style positioning, then it will do just fine.

Somewhat less of an alternative

Unfortunately it doesn't work in IE Win 5.01 or 5.5. And adding equal heights into the mix makes IE Win 6 lose the plot. Moreover IE Mac 5 pays no attention to the left declarations. And the same goes for Safari 1.03.

An alternative alternative

On the other hand it works in all Netscapes back to 6.1 (and gets round the longest column problem that occurs in some of them) and all versions of Opera back to 7.0. - feed the 'original' Any Order technique to all versions of IE and you've got the best of both worlds. Forgive me for leaving that for someone else to implement...

Where?

Overview of browser behaviour for alternative method
Browser Any Order Equal Heights
IE Win 6 pass fail [note]
IE Win 5.5 fail [note] fail [note]
IE Win 5.01 fail [note] fail [note]
IE Mac 5.2 fail [note] fail
Firefox 1.5 pass pass
Firefox 1.0 pass pass
Netscape 8.0 pass pass
Netscape 7.2, 7.1, 7.0 pass pass
Netscape 6.2, 6.1 pass pass
Netscape 6.0 fail [note] fail
Netscape 4.7 fail [note] fail [note]
Netscape 4.04 fail [note] fail
Opera 8.0, 8.5 pass pass
Opera 7.5, 7.2, 7.1, 7.0 pass pass
Opera 6 pass fail [note]
Opera 5 fail [note] fail
Safari 2.0, 1.3 pass pass
Safari 1.03 fail [note] fail [note]
OmniWeb 5.0.1 pass pass
iCab 3.0 beta pass pass
Notes on individual browser behaviour
IE Win 6.0
Equal Heights

The overflow: hidden does not do its magic and the columns are painted into the distance.

IE Win 5.5, 5.01
Any Order

Shifted elements are incorrectly positioned

Equal Heights

Given the problems with the any ordering, the results are not pretty

IE Mac 5.2
Any Order

The left declarations are completely ignored and the columns display in source order

Netscape 6.0
Any Order

Columns simply stack up on top of each other and no background colour is painted

Netscape 4.7
Any Order

Background colours not painted but the positioning is preserved.

Float clearing would need additional markup cruft.

Equal Heights

Columns vanish.

Netscape 4.04
Any Order

Background colours not painted and columns just stack.

Opera 6
Equal Heights

There's a rendering display problem (which is more sever in the Mac than the Win version) that causes the columns to be painted overlong. The "usual" fixes of clicking back and forward or switching to another app and back again don't work, but scrolling up and down make's everything magically ok!

Opera 5
Any Order

Background colours not painted and columns just stack.

Safari 1.03
Any Order

The left declarations are completely ignored and the columns display in source order

Equal Heights

The left declarations still don't work, but the column heights are correctly painted.

Position is Everything