Spalten mit CSS

hijacker666

Hi,

Ich bin gerade dabei für ne HTML Seite mittels CSS 3 Spalten zu imittieren, allerdings habe ich dabei weniger mit Spalten sondern mit dem drum herum ein paar Probleme.

Die Problemseite kann man HIER sehen.

Das Auto stellt Spalte 1, der Text "Blubber" stellt Spalte 2 bzw. Spalte 3 dar. Allerdings habe ich jetzt das Problem wenn ich da mehrere "blubber" einbauen das sich das ganze Design verschiebt und noch dazu schiebt sich der nachfolgende Text auch mitten rein, siehe die Passage mit Audi A3.

Ich poste im nachfolgenden einmal die HTML und CSS Passagen.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:

<div id="data">
<p class="pic"><img src="data/images/a2.jpg"></p>
<div class="benzin">
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
</div>
<div class="diesel">
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
</div>

code:
1: 2: 3: 4: 5:	/* Technische Daten */ #data p{margin:0;padding:0} #data .pic {float:left;width:30%;} #data .benzin {float:left;width:30%;} #data .diesel {float:left;width:30%;}

Vielleicht hat von euch wer kurz ein paar Anregungen oder Tipps ...