How to stack divs from top to bottom in CSS
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!
@ 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.