Display divs with different sizes with CSS

Question

how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the div

Answer 1

I think that the jQuery Masonry plugin would be what you're looking for in this instance:

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

JS Fiddle demo.

Answer 2

You can do that. For that you have to have position as "absolute".

Then manually calculate the height and top value to place the div where ever you want.

For making the things easy take the width of all divs same. Also make height of divs in each

column fixed.

Let me know if you need more clarification how to do this.