how to remove vertical gaps when using floats

Question

I used float: left for my divs but vertical gap created.
How to remove gaps on top of div 5 and 8?

Please see JSFiddle Example.

Note: I need responsive (change result width). Ordering is important, so this JSFiddle not acceptable. I will use bootstrap and col-lg-6 in real project. Contents may be dynamic. JS solution is acceptable.

Answer 1

There is not css pure solution, I suggest you use something like http://masonry.desandro.com/ .

Answer 2

check this use css3 column property and adjust as you want

http://jsfiddle.net/6sPqC/14/

HTML
<div class="a">
    <div class="a1">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
    <div class="a2">2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </div>
    <div class="a3">3 3 3 3 3 3 3 3 3 3 3 </div>
    <div class="a4">4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 </div>
    <div class="a5">5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 </div>
    <div class="a6">6 6 6 6 6 6 6 6 </div>
    <div class="a7">7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 </div>
    <div class="a8">8 8 8 8 8 8 8 8 8 8 8 88 </div>
<div>


CSS
.a{
    width: 200px;
    margin: auto;
   -moz-column-count: 2;
   -moz-column-gap: 10px;
   -webkit-column-count: 2;
   -webkit-column-gap: 10px;
}
.a div{

   width: 100%;
   margin: 5%;
}


.a1,.a6{background-color: red;}
.a2,.a7{background-color: blue;}
.a3,.a8{background-color: green;}
.a4,.a9{background-color: gray;}
.a5,.a10{background-color: yellow;}

Answer 3

It happen due to your div a3 have less content due to which you a3 float left with your div a4 and cover gap upto white space and then your next div 5 float left. you have two option to resolve it 1st you apply content min and max length restriction for div. if content is static then adjust your content according to div 2nd option is create a new class with float:none property and apply it on that div after that you need to drop in this example we need drop on div 3 .

but there is no alternate solution for that