CSS box "flow"/stacking (see screenshot)

Question

I'm having a hard time making boxes flow as illustrated in the attached screenshot. Seeing as I'm not even quite sure what this technique is called, it's making googling hard.

The boxes with be generated using jQuery's AJAX implementation if that makes a difference.

UPDATE: Thanks Jonathan, that's close but it's apparent I haven't described the problem well enough. Each box contains a categoryHeading, and an unknown number of records (bookmarks) related to that heading -- might be two, might be 50.

Let's say I have six bookmark categories (boxes). Since users can enter as many or few bookmarks as they please into each category (which is also unlimited), I really don't know how big any of the boxes will be.

In the newly attached illustration, this is illustrated better, I hope.

I'd prefer not to be stuck with a fixed number of columns, since the container width depends on the screen resolution of the user.. so low resolution might only have room for two columns, while higher resolution/bigger browser width has room for five columns.

I can somehow mimick this using http://welcome.totheinter.net/columnizer-jquery-plugin/, but it's not perfect, and IF there's a strickly CSS way of doing it, that'd be much prefered.

Using the code Jonathan suggested, it would work well if each category contained about the same number of bookmarks and I was ok with using a fixed column layout, but when one category contains 50 bookmarks, while another one only contains three, a lot of space goes to waste.

See: Ole screenshot/illustration
See: New illustration

Answer 1

It's nothing more than three master columns, with boxes within:

<div class="col1">
  <div class="box1">Top Left Box</div>
  <div class="box2">Middle Left Box</div>
  <div class="box3">Bottom Left Box</div>
</div>
<div class="col2">
  <div class="box1">Top Center Box</div>
  <div class="box2">Middle Center Box</div>
  <div class="box3">Bottom Center Box</div>
</div>
<div class="col3">
  <div class="box1">Top Right Box</div>
  <div class="box2">Middle Right Box</div>
  <div class="box3">Bottom Right Box</div>
</div>

Then it's a matter of giving each box a specific height, and margin-bottom to all.

.col1, .col2, .col3 {
  margin:10px 5px;
  float:left;
  width:100px;
}
.col1 div, .col2 div, .col3 div {
  margin-bottom:10px;
}
.col1 .box1 {
  height:100px;
}

Answer 2

Nope. If you can't count on the number of columns there is no CSS-only solution (though it looks like there will be in CSS3 - a fun thought). You'll need JS.