Styling map of lists using CSS

I have a Map<Category, List<Link>> that i'm iterating over in my jsp:

<c:forEach var='entry' items='${categoryToLinkMap}'>
  <div class="category_section">
    <h2>${entry.key.name}</h2>
    <ul>
      <c:forEach var='item' items='${entry.value}'>
        <li>
          <a href="${item.href}">${item.label}</a>
        </li>
      </c:forEach>
    </ul>
  </div>
</c:forEach>

With the following CSS

.category_section {
  float: left;
  width: 300px;
  height: 200px;
}

What I'm trying to achieve is a maximum of 3 sections horizontally, any more than that wrapping under. My CSS works as I want with the one drawback being I have to set the height or t开发者_如何学Che div sections are all over the place. If I set the height and a category contains many items then the links overlap.

What's the best way to achieve this using CSS? Any thoughts on a different approach? I'm very new to front-end stuff so if it could be done better please let me know.

Edit: Here's a quick mock-up of what I'm trying to do:

a different approach would be to use nested UL's and float left the li's of the first UL in the hierarchy. with your code use the clearfix css hack to auto expand floated divs:

 .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}