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

Jag är inte helt säker på hur du menar faktiskt, men jag tror att du vill att alla header-box:ar ska hamna på en ny rad och isf är det bara att du klämmer in clear:both i headerbox klassen så kommer alla att hamna på en ny rad.

Hmm misstänker dock nu att du vill ha dessa liggande bredvid varandra men att den fjärde boxen inte får plats...

Fungerar det om du säter width till auto? eller du får andra problem då?

Jag vill att de ska ligga brevidvarandra, helt sant. Om widden tar slut skall en ny rad påbörjas. Antalet kan alltså vara från 1 till n. Om vi skulle haft 8 st header-box i exemplet ovan skulle det blir 2 rader med 3 i och en rad med 2 i.
Om vi sedan även ändrar width på header-boxen till 100 (med marginaler så får då 4 plats i bredd på diven med 500 i width) så ska det blir två rader med 4 i.

Kanske blev lite klarare?

Ja nu blev det klarare men problemet blev desto knivigare :)

Om alla hade varit lika höga så hade det ju inte varit något problem för då hade dom under lagt sig i en snygg rad under när utrymmet tog slut.. men jag misstänker att så inte är falet eftersom du har en <br /> i den första boxen... Så tyvär har jag inget bra svar till dig, men det finns kanske någon annan här som kan svara på detta.