float nur auf nachfolgendes Element anwenden

[Axel Richter]

Hallo,

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;
 }

Lass das CSS so und ändere das HTML so:

<table class="box">
<tr>
<td class="label">User ID</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Name</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Date</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Time</td>
<td class="data">Kurzer Text</td>
</tr>
</table>

viele Grüße

Axel