Css display: what? - arrange boxes one by one
<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 organized one after another and inserted together in a container. In this case, the second category-group will go right below the first category, then there will be a third to the right of the first, second, etc.
If I try to provide a display of a group of categories: inline, then all categories of groups are then lined up in one long column that would break out of the container.
+4
1 answer
I ran into this problem. I ended up using jQuery Masonry to make my div stack nicely in a fixed-width container.
As far as I know, there is no pure CSS fix that will achieve this effect.
+4