css display: what? - arrange boxes one after another
    <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>

![screenshot][1]

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.


  [1]: http://i.stack.imgur.com/iwtr3.png
css display: what? - arrange boxes one after another
===

    <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>

![screenshot][1]

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.


  [1]: http://i.stack.imgur.com/iwtr3.png