Floating divs with different heights are stucked while wrapping

Question

Hello! Here is a problem: I have several (up to 5) divs with different heights. Inside those divs are portlets, which can grow in height. Here is a simplified example:

.clz {
  float: left;
}

<div class="container">
  <div class="clz">1111111111<br/>1111111111</div>
  <div class="clz">2222222222<br/>2222222222<br/>2222222222</div>
  <div class="clz">3333333333<br/>3333333333</div>
  <div class="clz">4444444444<br/>4444444444</div>
</div>

Here is a JSFiddle, where you can see it.

When I decrease my browser window width, divs are wrapped, which is very good. The bad part is that 4444444444 is stuck at 2222222 - it does not fall to the start of the page:

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

Desirable behaviour is that when wrap occurs when 4444444 is placed at the beginning of the page at completely different line:

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444

Answer 1

You can use display:inline-table for this. Write like this:

.clz{
    display:inline-table;
}

Check this http://jsfiddle.net/eGawU/13/

It's till IE8 & above