✔ Problem mit div-Tabelle

[Microhome]

Hallo liebe Community,
ich möchte mir folgende Tabelle aus Containern zusammenbauen:

[ ][ ][ ][ ][ ]
[ ][ ][ ]
[ ][ ][ ][ ]

Die Tabelle wird später noch länger, bekommt also mehr Zeilen, aber für das Pronzip sollte es ersteinmal reichen.

Nun verwende ich hierfür folgenden Code:

<div style="width:5350px; color:#fff;">
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/3</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/4</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/5</div>
	
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/3</div>

	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/3</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/4</div>
</div>

Ich weiß leider nicht, wie ich dieser "Tabelle" einen Zeilenumbruch einfügen kann, sprich nach 2/3 soll eine neue Zeile beginnen. Im Moment jedoch werden die Zeilen nacheinander vollständig gefüllt, bis die Breite (5350px) erreicht ist. Erst dann erfolgt der automatische Zeilenumbruch. Ich möchte aber nicht in jeder Zeile 5, sondern manchmal nur 3 oder 4 Spalten haben.

Wie kann ich das realisieren? Hab schon vieles ausprobiert mit float:none oder clean:left aber leider hat nichts funktioniert. Habt ihr eine Idee?


Besten Dank und liebe Grüße!

 

[Maik]

<div style="width:5350px; color:#fff;">
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/3</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/4</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#1/5</div>
	
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#2/3</div>

	<div style="clear:left;width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/1</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/2</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/3</div>
	<div style="width:1000px; height: 500px; border: 2px dotted #fff; padding: 10px; margin: 20px; float:left;">#3/4</div>
</div>

... funktioniert bei mir tadellos.

Doch wieso zeichnest du diesen Codesnippet nicht semantisch mit einer Tabelle aus, anstelle dieser "DIV-Suppe"?

mfg Maik

 

[Microhome]

Super, danke dir! Hab das clean vorher immer an die falsche Stelle geschrieben.
Ich benutze den div-Salat, weil das für die Weiterverabeitung einfacher wird. Ansonsten bin ich selbst kein Fan von diesen Div-Tabellen.


Beste Grüße!