How to position variable width and height boxes floating left as one-vertically in each line?

I have lot of boxes (display: inline-block + float: left) with variety of width and height like this:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

And i don't know how to do, that when box have to be wrapped, it will be aligned in nex开发者_Python百科t "line" like that:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD
EE

Not as natural float: left:

AA BB CC DDD EE FF GG
   BB    DDD    FF EE
         DDD

Real example (current state):

Expected result wich i want to achieve:

jsFiddle demo: here

---

In your demo, you have both float: left and display: inline-block. float: left forces display: block, so display: inline-block was doing nothing whatsoever.

You can achieve your desired result with display: inline-block; vertical-align: top.

See: http://jsfiddle.net/tdSnH/1/

---

<style>
    #container{
       min-width:100px;
       max-width:1024px;/*see your boxes' container width*/
    }
   #container .item{
      float:left;
      min-width:10px;/*some value*/
      max-width:256px; /* #container with / item.length */
    }
</style>
<div id="container">
    <div class="item">a</div>
    <div class="item">bbbbb</div>
    <div class="item">ccc</div>
    <div class="item">d</div>
</div>