How to float div in CSS?

Question

I have this list in HTML and I would like order it by columns. I tried using floats it gives me this:

EDIT : Height of these <li> is undefined, but I would like C below B, E below E and G below F without change the structure and change the order. I don't want to use position absolute. I'm wondering if there are other solutions.

HTML :

<ul>
   <li class="item">A</li>
   <li class="item">B</li>
   <li class="item">C</li>
   <li class="item">D</li>
   <li class="item">E</li>
   <li class="item">F</li>
   <li class="item">G</li>
<ul>

OUTPUT (using float: left; width: 240px; border-left: 1px solid #EEE) :

What I want is more like this below, without changing the HTML because I already use this structure to make responsive.

Is it possible ?

Answer 1

You could use column CSS and a margin-bottom on the first LI tag, like this.

ul {
     column-count:4;
     padding:0;
     column-rule: solid lightgray 1px;
}

li {
     display:inline-block;
     width:100%;
}

li:before {/* demo purpose to set an height to lis */
     content:'';
     float:left;
     padding-top:50%;
}

li:first-of-type {
     margin-bottom:50%;
}

You may need a JavaScript prefixer or add vendor-prefix manually.