Search code examples
cssmultiple-columns

List in two columns

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)

Solution

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

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