How to make floating DIV list appear in columns, not rows

http://stackoverflow.com/questions/5484215

by Marcel

HTML

<div id="wrap">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

CSS

.list_item {
    margin: 5px;
    padding: 5px;
    width: 200px;
    float: left;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}