Question

<div id="container">
  <div class="category-group">
    <h4>title</h4>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class="category-group">
    <h4>title</h4>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

<style>
.category-group {
  display: inline-block;
  vertical-align: top;
}
</style>

I want all category-groups to be arranged one after another and fit together in the container. In this case, second category-group would go right under the first category-group, then there would be third on the right of the first and the second and so on.

If I try to give category-group display: inline, all category-groups are then lined in one long column that would break out of the container.

Answer 1

I have faced this problem as well. I ended up using jQuery Masonry to get my div’s to stack nicely within a fixed width container.

To my knowledge, there isn’t a pure CSS fix that will achieve this effect.