1 zentriertes DIV mit 2 unterschiedlich breiten DIVS daneben?

[mds]

Hallo!

Ich habe eine (wahrscheinlich absolute Anfänger-) Frage: Ich möchte ein horizontal und vertikal zentriertes DIV haben, und daneben auf beiden Seiten jeweils ein gleichhohes, aber verschiedenbreites DIV.
Um es besser anschaulich zu machen, nachfolgend eine kleine Skizze:




Das mittige DIV (DIV 1) soll halt bei jeder Auflösung genau im Bildschirm zentriert sein. Das kriegt man ja mit z.B. mit folgenden Eigenschaften hin:

<div style="position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px;">

oder mit:

<div style="position: absolute; width: 300px; height: 300px; top: 50%; margin-top: -150px; margin-left: auto; margin-right: auto;">

Aber weiter komme ich leider nicht :( Sobald ich einen Container drumlege mit einer Breite von 500 px und den zentriere, habe ich ja mein DIV 1 nicht mehr genau in der Mitte.



Vielen Dank an alle die sich die Mühe geben einem Anfänger zu helfen!

 

[Wustersoss]

Aber weiter komme ich leider nicht :( Sobald ich einen Container drumlege mit einer Breite von 500 px und den zentriere, habe ich ja mein DIV 1 nicht mehr genau in der Mitte.

Richtig. Demzufolge musst du von dem Äusseren Container(Box) ausgehen. Es ist ja nur ein wenig Rechnerei nötig.

Du hast 500 Pixel Gesamtbreite. Und dein horizontaler Mittelpunkt soll bei der Mitte von dem roten inneren Container liegen, der 300 Pixel hat.
Der Mittelpunkt ist somit bei 150 Pixel plus die Breite des linken Containers, der auch 150 Pixel hat, somit bei 300 Pixel von links an gerechnet.
Genauso wie du vorher deinen roten Container vertikal zentriert hast, machst du das jetzt mit dem übergeordeneten Container in horizontaler Richtung und verschiebst ihn dann nach links um 300 Pixel mit Margin-left.

Schon hast du es.