sich ausrichtende Definitionsliste

[Magerquark]

Ich möchte eine Art "Zusammengehörigkeitspaarung" umsetzen. Das könnte man mit einer Tabelle machen, ich denke aber eher an eine Definitionsliste. Die Definitionsliste sieht im normalen Zustand bekanntlich so aus, dass das dd unter dem dt und eingerückt ist. Damit es wie eine Tabelle aussieht, muss man ein wenig feilen. Jetzt soweit:

<div id="box">
 <dl>
  <dt>Team</dt>
  <dd>Blaumänner</dd>
  <dt>Tore</dt>
  <dd>16</dd>
 </dl>
</div>

(Das mit dem div um die dl lassen wir jetzt erst einmal so stehen...)
Weiter mit dem CSS, wobei die Farbwerte nur zum Testen drin sind.

#box{
 width: 200px;
 background-color: #eee;
 overflow: hidden;
}
dl{
 margin: 5px;
 line-height: 1.2em;
}
dt{
 background-color: #64BA55;
 width: 50%;
 float: left;
}
dd{
 background-color: #BAD8E9;
 width: 50%;
 margin: 0;
 float: right;
}

Das schaut dann auch ganz nett aus (siehe Bild 1). Aber sobald der Text in einem der Felder länger wird, geht alles in die Grütze (siehe Bild 2). Das kann man ein wenig umgehen, wenn man dem dt noch ein clear:left; und dem dd ein clear:right; verpasst, also so:

dt{
 background-color: #64BA55;
 width: 50%;
 float: left;
 clear:left;
}
dd{
 background-color: #BAD8E9;
 width: 50%;
 margin: 0;
 float: right;
 clear:right;
}

Das Ergebnis schaut dann so aus, wie in Bild 3. Und schon stehen wir vor dem nächsten Problem. Kann man die dds sich an der Größe der dts ausrichten lassen? Schaut man sich Bild 3 an, müsste dann das "Feld" für "Blaumänner" genauso tief runtergehen, wie das Feld "Das Gewinner-Team". Jemand eine Idee? Oder gerne auch eine "optische Täuschung"...?

[sejuma]

Wenn du weißt, wieviele Zeilen du maximal benötigst, könntest du dd und dt je noch einen identischen height-Wert mitgeben.
In deinem Fall spricht aber auch nichts dagegen, eine Tabelle zu verwenden. Gerade für solche Zwecke sind sie ja da.