CODEWITHSUNDEEP
css
Sergey
Sergey

Reputation: 4752

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

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.

Upvotes: 4

Views: 1066

Answers (1)

Chris Cooning
Chris Cooning

Reputation: 133

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.

Upvotes: 4

Related Questions