8 Columns - header
Reload the page for the columns to display differently. The html remains the same - it's just the CSS that changes.

column one

one one one
one one one
one one one
one one one
one one one
one one one

column two

two two two
two two two
two two two
two two two
two two two

column three

three three three
three three three
three three three
three three three

column four

four four four
four four four
four four four

column five

five five five
five five five
five five five
five five five

column six

six six six
six six six
six six six

column seven

seven seven seven
seven seven seven

column eight

eight eight eight

footer

This blatantly ridiculous demo serves the more serious purpose of showing that the ordered float model is a powerful generic approach that can handle any number of columns from two upwards. And can allow you to stack columns on top of each other should you so desire

The columns are grouped so in the code: [{12}{34}][{56}{78}]

But they could have been grouped [{[{[{[12]3}4]5}6]7}8]. Or any such variant in between. Which could yield you any possible arrangement of the columns you could imagine. As it is there are 64 different, albeit mostly useless arrangements of the the columns with the current grouping. All while allowing you to keep the flow of the document logical and accessible.

Try doing that in tables.

The algorithm for producing the css really isn't very complicated but it seems to be fairly robust. IE Win needs to be fed width values that don't quite add up to 100% (to prevent premature wrappage as per usual) in order to do the right thing. Meanwhile, Geckos, Operas and IE5 Mac do exactly the right thing.

Back to CSS index

8 Columns - header Reload the page for the columns to display differently. The html remains the same - it's just the CSS that changes.