Stack divs with different heights

Question

I want to stack divs with different heights but same width within a div container.. from top to bottom going right.

Problem now is with divs that are short.. gives a ugly gap to the div above.

I've added a small sketch with what i want to do..

Thanks from norway!

Answer 1

I suppose that you are using jQuery on your site. From the sketch I suggest to take a look at jQuery plugin called Masonry.

Answer 2

CSS:

.column { width:20em; float:left }
.column div { background:red; margin:1em }

HTML:

<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>