radbrytning på floating

Hej jag har följande kod

<div style="width: 500px;">
<dl class="header-box">
   <dt>Rubrik 1</dt>
   <dd>Beskrivning på<br />rader</dd>
</dl>

<dl class="header-box">
   <dt>Rubrik 2</dt>
   <dd>Beskrivning</dd>
</dl>

<dl class="header-box">
   <dt>Rubrik 3</dt>
   <dd>Beskrivning</dd>
</dl>

<dl class="header-box">
   <dt>Rubrik 4</dt>
   <dd>Beskrivning</dd>
</dl>

</div>

Med följande css:

.header-box {
   width: 150px;
   float: left;
   margin: 0 20px 12px 0;
   padding: 0;
}

.header-box dt {
   margin: 0 0 6px 0;
   padding: 0;
   font-weight: bold;
}

.header-box dd {
   margin: 0;
   padding: 0;   
}

Hoppas jag inte missat något nu.

Eftersom de fyra inte får plats i bredd i den 500px breda diven (diven är för att få ett enkelt exempel) så blir kommer rubrik 4 på en ny rad. Men eftersom rubrik 1 har 2 rader med beskrivning så kommer inte rubrik 4 att lägga sig helt på en ny rad utan ligga intill nederkanten på rubrik 4.

Ett sätt som jag vet att jag kan lösa det är att innesluta de tre första i en div med följande klass

.one-piece {
   clear: both;
}

Problemet är då att det blir kod styrt och inte layout styrt. Jag måste i koden lägga en loop som lägger till kod före rubrik1 och efter rubrik2 (via scriptspråk). Jag kan alltså inte ändra width till 100 px och på så vis få fyra i första raden

Kan jag kringgå problemet på något annat sätt så att jag bara kan generera fram valfritt antal som kommer att ligga fint och prydligt som jag senare kan modifiera genom att bara byta i css:en

Förstår ni inte får jag försöka förklara lite mer. Kanske blev lite "grötigt"

Edit: <br/> ska ju faktiskt vara <br /> :D