Distributing boxes vertically in columns rather than horizontally in rows

Hello, I’m looking for a way to distribute boxes vertically down when filling another box, rather than horizontally across.

This is what I get when when I float boxes:

–––––––
1 | 2 | 3
–––––––
4 | 5 | 6
–––––––
7 | 8 | 9
–––––––

Easy. But instead I want this:

–––––––
1 | 4 | 7
–––––––
2 | 5 | 8
–––––––
3 | 6 | 9
–––––––

How can I achieve this? Is there a way that works in all browsers?

The simplest way would be to distribute those boxes in three divs set up as columns. Is that feasible with your design? (Is this a static page or is the content dynamically inserted?

Thanks for the reply. Content (more boxes) would be added over time, so there is no fixed number of columns. I just wanted the boxes to flow as columns sort of automatically – just as it flows as rows horizontally when floated…

any chance to do that in CSS?

That type of technique is know of as newspaper columns, and can’t be done with CSS without including tricks, such as marking where the breaks will be, or other odd workarounds.

It can be done with CSS3, such as in this article: The Future of “Newspaper” Column Style Layout with CSS 3!

But, it doesn’t work across most web browsers yet, so other techniques tend to have to be used instead.

Thanks for the info.