Multiple div boxes in columns, ordered verticaly

Question

I have changing number of divs (elements) and ordering them on page as follows:

1 2 3

4 5 6

7 8 9

Having tested it, it would work better phone book style, like this:

1 4 7

2 5 8

3 6 9

Is there any easy/css way to do so? Tnx in advance

This question is essentially the same as [this one](http://stackoverflow.com/questions/8092830/i-want-to-show-list-items-as-2-or-more-columns-dynamic-alignment/8419101#8419101) with some similar answers. Note that some of those answers accommodate non-CSS3 (like IE7) browsers as well. — ScottS, May 24 '12 at 20:39

score 2 · Accepted Answer · answered May 24 '12 at 20:30

2

Given that you're looking for CSS3 solutions, why not simply use column-count:

body {
    -webkit-column-count: 3;
    -o-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
.box {
    width: 4em;
    height: 4em;
    line-height: 4em;
    counter-increment: box;
}

JS Fiddle demo.

References:

column-count.

answered May 24 '12 at 20:30

David Thomas

249,100
51
377
410

very elegant and simple, but not working in IE, in which case I have a very long vertical array of divs. Hard to scroll :( – dzona May 24 '12 at 20:41
Unfortunately that's the side effect of CSS3 (and, still, quite a lot of CSS2). The only way around it is, to either wrap elements in other, 'columnar' `div` elements and float them, or to use JavaScript and do the same. – David Thomas May 24 '12 at 20:46
@dzona and David--It can be done without wrapping or javascript if one is _able/willing to set a specific number of divs in height_. [Either technique from my two answers in this post](http://stackoverflow.com/questions/8092830/i-want-to-show-list-items-as-2-or-more-columns-dynamic-alignment/8419101#8419101) (which is list items, but same principle) accommodate IE7+, though the "newer" answer of mine is better in my opinion. – ScottS May 24 '12 at 23:43
@ScottS - In both of your solutions I must know which div to add class "first". That means I have to do some "calculation". I wanted to do it in pure css if possible. I thint that [jquery solution](http://jsfiddle.net/Bdsj9/28/) is better. Tnx anyway :) – dzona May 25 '12 at 09:08
@dzona--no problem. If CSS3 browser support (including IE9) is all that is required, then pure css can still work using `nth-child` or in your case with `div` elements, probably `nth-of-type`, then [the calculations are done for you](http://jsfiddle.net/VVMnq/117/). But whether you switch to pure CSS or remain with jquery, I'm glad you found a solution that works for you. – ScottS May 25 '12 at 17:54

score 1 · Answer 2 · answered May 24 '12 at 20:28

1

You can try using a jquery columnizer plugin. I've used jquery.columnizer with success several times: http://welcome.totheinter.net/columnizer-jquery-plugin/

answered May 24 '12 at 20:28

Greg B

803
9
22

score 0 · Answer 3 · answered May 24 '12 at 20:26

You could use a grid layout in css to order them, and have them float, using something like one of these to generate it http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/. Or you could fix all their positions, which would be a more brute force way of doing it.

score 0 · Answer 4 · answered May 24 '12 at 20:39

0

You could try doing something like this - http://jsfiddle.net/HKxUf/

Create three columns consisting of div's with a col class. Inside of these place the appropiate div's.

answered May 24 '12 at 20:39

Lewis Coulson

46
3

But as I said, I don't know how many divs I gonna have. I want to avoid any calculations if possible – dzona May 24 '12 at 20:44

Multiple div boxes in columns, ordered verticaly

4 Answers4