List in two columns

Question

I'm trying to display a list in two columns. My thought was avoid tables.

div #DocumentList .Preview {
    float: left;
    width: 50%;
    padding-bottom: 10px;
    position: relative;
}

and put each item in one of these div's inside a container div.

I though it was working as 4 items and 1 item come to their place but to my surprise when there are 3, and I can presume with 5, 7..., the "spare" one goes to the right

I don't get it. I would like to avoid extra reckonings in the view checking each item and deciding whether it should go right or left (I understand it's not a big deal, but if I could avoid it I think would be cleaner)

Thanks!

Answer 1

For IE 8 or greater (and of course, all other browsers)

.item{
    display: inline-block;
    width:49%;
}

Answer 2

try css3

div {
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

http://www.w3schools.com/css3/css3_multiple_columns.asp