How to float div in CSS?

css, html

Solution

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.

Problem

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 ?

Original source