manage space between divs (dynamic height, float left)

Question

I have multiple dynamic left aligned divs in my page, since the divs are dynamic so the heights will be different. I want to manage the empty space between divs . please tell me how to do it with css or javascript. Please see below image (it is just for explanation)

What is the problem you have for doing this with Javascript? Given that Javascript (differently from CSS) can do **literally** anything you want with the page seems to me the problem is just that you don't known what you want to do... — 6502, Dec 09 '16 at 06:39
if you don't know the heights beforehand you can use something like `masonry.js` — kukkuz, Dec 09 '16 at 06:40
Helpfully! check it! http://masonry.desandro.com/layout.html — Afzal, Dec 09 '16 at 06:49
It's an interesting question. You can design with negative value of `margin-bottom` and positive value of `margin-top` depends on the heights of each item. — Anson, Dec 09 '16 at 06:51
You can check this issue, might be get solution. http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — shakil, Dec 09 '16 at 06:53
You can check the issue and might be get solution: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — shakil, Dec 09 '16 at 06:54

score 1 · Accepted Answer · answered Dec 09 '16 at 06:45

1

This is called Masonry layout. Try to look at flexbox or column layout. Here are some examples:

answered Dec 09 '16 at 06:45

Ivan Demchenko

457
3
13

score 1 · Answer 2 · answered Dec 09 '16 at 06:45

One way is: You can do three column and add every third div per column.

Second way is: 'Masonry.js', that i use often. http://masonry.desandro.com/ its easy so i recomend it:

Html:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
</div>

css:

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

jquery:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

manage space between divs (dynamic height, float left)

2 Answers2