float nur auf nachfolgendes Element anwenden

[Chris]

Hallo

Bin gerade ganz verzwatzelt und komme nicht weiter ohne das Dokument unnötig mit leeren Elementen aufzufüllen die mir das float wieder zurücknehmen sollen.

Hier mein Beispielcode.

<div class="box">

<div class="label">User ID</div>
<div class="data">Kurzer Text</div>

<div class="label">Name</div>
<div class="data">Kurzer Text</div>

<div class="label">Date</div>
<div class="data">Kurzer Text</div>

<div class="label">Time</div>
<div class="data">Kurzer Text</div>

</div>

Der Container box umfasst das ganze Feld nur mit einem Rahmen. Der Container label soll immer auf der linken Seite stehen, der nachfolgende Container rechts davon. Beim nächsten Container label soll das float wieder aufgehoben werden und dieser wieder links eine Zeile tiefer stehen.

Hier das CSS

.label {
 color: #336699;
 background-color: #eeeeee;
 font-size: 0.8em;
 font-weight: bold;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 width: 6em;
 float: left;
 }

.data {
 color: #000000;
 background-color: #ffffff;
 font-size: 0.8em;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 }

Hat jemand einen Tipp wie ich das float nach dem Container data wieder aufheben kann, so dass der nächste Container label wieder sauber auf der linken seite beginnt. Momentan wird jeder label Container um eine Containerbreite nach rechts versetzt.

Grüße, Christian