Question

I have a list that goes like this:

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

using css float left, it looks like this in html:

1 2
3 4
5

Is it possible to style my divs to look like the following:

1 4
2 5
3

Hope someone can help, thanks!

Answer 1

@ funky; you can use css3 column-count property for this

css:

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 link for a demo Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

note: it doesn’t work in IE.