Vertical alignment of DIV's using relative positioning and inline-block?

Question

I have a problem aligning DIV's vertically, when the contents within them have different height (although the DIV's themselves have a fixed size).

See HTML example here (with inline CSS)

I want the DIV's to "flow" like text, so I'd like to avoid using position:absolute if possible. I'm using display: inline-block to the DIV's won't collapse.

Answer 1

Add a vertical-align property - it doesn't matter which one, they all do the same thing, since they're the same size. If they're different sizes, use vertical-align: middle :

.collection_box {
    vertical-align: middle; /* or top, or bottom, if they're the same size */
}

Answer 2

Float them to the left:

.collection_box {
  float: left;
}