CSS: Floating multiple elements with different heights on multiple rows?

Question

I'm trying to organize divs into two columns, but not force them into rows. I'm also trying to keep the vertical spacing between the divs a constant.

You can see the following demo, which would be correct if there wasn't huge amounts of vertical whitespace between the divs in each column.

html

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

I thought that I could just float them to the left with a static width, but apparently that didn't work.

Any ideas?

Answer 1

Thanks to J.Albert Bowden for the fiddle

HTML

<div id="box">
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</div>

CSS

#box{
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.module{
    margin-bottom: 20px;
}