Question

I have multiple <div> tag with same width but different height in a container. When the browser is resized and <div> elements are rearranged, they get a lot of spaces between. For example the following HTML:

<div class="wrap">
    <div class="box">
        This has less height
    </div>
    <div class="box">
        This has more height
    </div>
    <div class="box">
        This has less height.
    </div>
</div>

Now when the browser is resized, the last div will move to the left side below the first div, but there’s empty space between them because the middle div has more height. Please look at the image.

Is it possible to arrange these divs using pure CSS? I could not find a way, so I tried jQuery masonry plugin, that works ok but the problem is that it often does not resonse quickly (for example, when you open the page first time, the layout is totally messed up, but if you refresh the page it gets fine).

So if its not possible with CSS only, is there any way to make it work without complicated plugins (for example using jQuery only?)

jsFiddle:
http://jsfiddle.net/HS2Zh/

Answer 1

If your questing is to remove the gap, you can remove this by using this code

            var h = 0;
            $('.box').each(function() 
            { 
                h = Math.max(h, $(this).height()); 
            }).height(h);

It will assign the unique height(max height of .box) to all .box classes