Hey there! Let's tackle a challenge: I've got a few divs, each with varying heights. These divs contain portlets that can expand in height. Here's a basic 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>Check out this JSFiddle link to see it in action.
As I resize the browser window width, the divs wrap nicely, which is great. However, there's an issue where 4444444444 remains stuck next to 2222222 instead of moving to the beginning of the layout:
1111111 2222222 333333
1111111 2222222 333333
2222222 444444
444444
The ideal scenario would be for 4444444 to shift to a different line at the start of the page when wrapping occurs like so:
1111111 2222222 333333
1111111 2222222 333333
2222222
4444444
4444444