Div-Container bei "position:absolute" im Browser zentrieren

Status
Nicht offen für weitere Antworten.

Gifty43

Erfahrenes Mitglied
Hallo Zusammen,

Kurze Frage: Wie kann ich zwei Div-Container, welche die Einstellung "position:absolute" besitzen (sie überlappen sich) im Browser zentrieren?

Ich verwende diesen HTML-Code...
HTML:
<div id="index">Hier ist die ganze Page integriert</div>
<div id="outdated">Hier ist das Fenster, welches über der HP erscheint</div>
...und dieses CSS:
Code:
div#index{
 position: absolute;
 width: 1000px;
}
div#outdated{
 position: absolute;
 width: 1000px;
 padding-top: 66px;
}

Ich habe es schon mit der Einstellung "margin: 0 auto;" oder "align: center;" versucht, aber es tut sich nix. Die Seite bleibt immer auf der linken Seite kleben.

Deshalb habe ich mir gedacht, wieso nicht einen <div> über die beiden anderen <div>'s erstellen und diesem im CSS "align: center;" zuweisen. Denkste...

Langsam bin ich echt am verzweifeln, hat jemand von euch eine Idee?

Besten Dank und einen schönen Abend.
 
Hi,

mit diesen Regelerweiterungen lassen sich die DIVs im Fenster horizontal zentrieren:

Code:
div#index{
 position: absolute;
 width: 1000px;
 left: 50%;
 margin-left: -500px; /* negative Hälfte von width:1000px */
}
div#outdated{
 position: absolute;
 width: 1000px;
 padding-top: 66px;
 left: 50%;
 margin-left: -500px; /* negative Hälfte von width:1000px */
}
 
Status
Nicht offen für weitere Antworten.
Zurück