3 Divs nebeneinander, mittig - Soll sich an Fenstergröße anpassen

Eli-

Mitglied
Hi, also ich habe so 3 Divs.

Die sollen mittig über die ganze Seite verteilt werden. Wenn das Fenster kleiner ist, soll sich der abstand der Kästchen verringern, und wenn zu wenig Platz da ist, sollen sie untereinander angezeigt werden.
Ich krieg das einfach nicht hin.

Ich habe bisher das:
(Ich brauche 2 Reihen, deswegen 2 * 3 Divs)

HTML:
<div class="alles">
<div class="kasten">
1
</div>
<div class="kasten">
2
</div>
<div class="kasten">
3
</div>
<br>
<div class="kasten unten">
1
</div>
<div class="kasten unten">
2
</div>
<div class="kasten unten">
3
</div>
<br>
</div>

CSS:
div.alles {
	width: 100%;
}
div.kasten {
	width: 300px;
	float: left;
	border: 1px solid black;
	margin-right: 100px;
	margin-top: 100px;
	margin-left: 100px;
	margin-right: 100px;
}

div.unten {
	margin-bottom: 100px;
}
div.alles br {
	clear: both;
}

Es klappt leider nur teilweise.
Der Zwischenabstand bleibt halt gleich, und wenn das Fenster zu klein ist, wird einfach das 3. Div in die nächste Zeile geschoben. Aber das sieht halt nicht so toll aus, weil wie gesagt der Zwischenabstand gleich bleibt immer.
Außerdem sind die 3 Divs nicht mittig. Sie sind leicht nach links verschoben.


Könnt ihr mir helfen?

Danke schon mal

LG
Eli-
 

Neue Beiträge

Zurück