Question

I have multiple number of divs that varies depending on the data it is using. Currently they are in a container div, and their width is half the container with a left float so they appear like:

1 2
3 4
5 6
7 8
9

etc..

I am trying to get it so that it appears like:

1 6
2 7
3 8
4 9
5

I can’t seem to find a simple way to do this.

Answer 1

@joseph; you can use css3 column-count property like this

    div#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 3;
        column-gap: 50%;

}

check this example http://jsfiddle.net/sandeep/pMbtk/ may be that’s help you