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:
- add
position: relative
- substitute
left
formargin-left
. The value ofleft
for block n is worked out so:- determine the position of the leftmost edge of the block
- add up the widths of any block that precedes it in the source
- 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?
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 |
IE Win 6.0 | |
---|---|
Equal Heights |
The |
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 |
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 |
Equal Heights |
The |