Q:

Layout (float) different height blocks with css

I have such div, with such html, as here:
http://pastebin.com/Xt2Ws2EU
and little css:
#manufacturers-list{
  width: 690px;
  height: 980px;
  max-height: 980px;
  margin: 10px 0 0 0;
  .man-area{
    margin: 6px 0 0 6px;
    width: 210px;
    float: left;
    ul, li{
      margin: 0;
      padding: 0 0 0 1px;
      list-style-type: none;
    }
    ul{
      padding: 0 0 0 10px;
    }
  }
  // *:nth-child(3n+1) {
  //    clear: both;
  // }
}

And in schema it looks so (left where i have red cross):

so everything is floated, but new element-line is only, after most max height block as in schema, but i need to style so, that blocks are floated without mind of max height block in line, how could i do this without js?  only with css?  

A:

chekout this post
HTML 
<div>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
</div>

CSS
div{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 480px;
}

div a{
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

