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>

Answer 3

Have a look at using CSS Columns

Here's the W3C spec, but a slightly easier read might be PPK's write up.

Answer 4

Use three column divs within container div. Each floats left. Add a div at the top and at the bottom that's empty and clears on both sides.

.column { float: left; width: whatever you want it to be; margin-left: whatever you want it to be; }

.clear{ clear: both; height: 0px; }

.column div{ margin-bottom: whatever you want it to be; width: whatever you want it to be; }

       <div id='container'>

<div class='clear'>&nbsp;</div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

  <div class='column'>
 <div>blah blah blah</div><div>blah blah blah</div>... etc
   </div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

<div class='clear'>&nbsp;</div>

       </div>