CODEWITHSUNDEEP
jqueryhtmlcss
user1251698
user1251698

Reputation: 2143

CSS: Rearranging div elements

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.

enter image description here 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/

Upvotes: 2

Views: 553

Answers (2)

Sowmya
Sowmya

Reputation: 26989

That can be done by using jquery masonry plugin. Hope this link helps you http://masonry.desandro.com/

If you are using the plugin already then try to give some gap between the blocks so that it will be having free space to flow around

Upvotes: 0

Hearaman
Hearaman

Reputation: 8736

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

Upvotes: 1

Related Questions