Question

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 next “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

Answer 1

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/