div-container ausrichten

[phase]

Hallo, ich möchte eine Alphabetische übersicht von verschiedenen Rubriken/Kategorien machen.

Im Moment sieht das ganze in etwa so aus:

html

<div id="cb5" class="contentBox kat">
 <div class="cbh2 cbh2kat"><h2 class="cb kat">A</h2></div>
 <ul>
  <li> <a href="#">Kat1</a> </li>
  <li> <a href="#">Kat2</a> </li>
  <li> <a href="#">Kat3</a> </li>
  <li> <a href="#">Kat4</a> </li>
  <li> <a href="#">Kat5</a> </li>
 </ul>
</div>

css

div.kat
{
 width:220px;
 float:left;
 display:inline;
 margin:22px 3px 0 0;
 font-size:14px;
}
div.kat ul
{
 margin:0;
 list-style:none;
}

Die Listen in den div's sind unterschiedlich lang, wodurch sich die höhe der div's natürlich auch unterscheidet.

Durch das float:left ordnen sich die div's zwar schön von links nach recht an aber es entstehen durch die unterschiedlichen höhen auch grosse Lücken, die nicht gewünscht sind.

hat jemand eine besssere idee die Container anzuordnen, damit keine Lücken entstehen?

Ich hoffe ich konnte mich verständlich ausdrücken, ansonsten muss ich mal ein beip. online stellen.

Vielen Dank und Gruß,
phase