CSS box "flow" / stacking (see screenshot)

Question

It's hard for me to make boxes, as shown in the attached screenshot. Seeing that I’m not even quite sure what is called this technique makes this a difficult search process.

Boxes are generated using the jQuery AJAX implementation, if that matters.

UPDATE: Thanks Jonathan for coming close, but this is obvious, I have not described the problem well enough. Each field contains a Heading category, and the unknown number of entries (bookmarks) associated with this heading can be two, maybe 50.

Say I have six categories of bookmarks (boxes). Since users can enter as many or several bookmarks as they like in each category (which is also unlimited), I really don't know how big any of the boxes are.

In a recently attached illustration, this is better illustrated, I hope.

I would prefer not to focus on a fixed number of columns, since the width of the container depends on the user's screen resolution. therefore, low resolution can only occur for two columns, and higher browser resolution / width occurs for five columns.

I can somehow mimic this using http://welcome.totheinter.net/columnizer-jquery-plugin/ , but this is not ideal, and if it has a shy CSS way, this will be much preferable.

Using the code suggested by Jonathan, it will work well if each category contains approximately the same number of bookmarks, and I was fine using a fixed column layout, but when one category contains 50 bookmarks and the other contains only three, a lot of space goes to waste .

See: screenshot / illustration Ole
See: New illustration

Answer 1

Nope. If you can't count on the number of columns, there is no CSS-only solution (although it looks like CSS3 will have an interesting idea). You will need JS.

Answer 2

These are no more than three main columns with drawers inside:

<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 is a matter of giving each box a certain height, and the extreme is for everyone.

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