DIV lässt sich nicht zentrieren

[Sven]

Hallo ihr,

und wieder einmal eine Frage, die im Archiv schon so oft auftaucht: Mein DIV-Element lässt sich nicht zentrieren - woran kann's liegen?

Bin aus den Hinweisen im Archiv oder der FAQ nicht schlau geworden, ich habs versucht mit margin-left:auto; und margin-right:auto;, sowie mit <div align="center"> aber alles wird wunderbar ignoriert.

http://www.wollny-online.eu/test.html

Das ist die Seite - und im Footer unten soll der Inhalt nicht linksbündig, sondern zentriert sein. Ein Blick in den Quelltext verrält folgendes: es sind 3 verschachtelte DIVs: Das erste (footerborder) legt einen äußeren weißen Rahmen fest, das zweite (footer) ist der Footer selbst, der unten fixiert ist, mit blauem Hintergrund usw.

Und das letzte div-Element, bei dem keine Klasse festgelegt ist, sondern nur style="position:relative;", das soll zentriert - denn das enthält den Inhalt mit dem Text und den Formularfeldern.

Klappt aber nicht (weder IE, noch FF). Weiß jemand warum?

Grüße
Sven

[Aristo]

Hi Sven

und wieder einmal eine Frage, die im Archiv schon so oft auftaucht: Mein DIV-Element lässt sich nicht zentrieren - woran kann's liegen?

Ganz schöner div-Overkill in deinem Code! Brauchst du wirklich ein div nur für den Rand des Footers?
Den div mit id="footer" hast du zwar mit margin-left:auto und margin-right:auto versehen, aber gleichzeitig hast du den div mit position:fixed definiert und Angaben zu seiner Positionierung gemacht. Das kann nicht funktionieren. Ersetze mal das da:
<div style="position:relative;">
durch:
<div style="width:50%; margin-left:auto; margin-right:auto">

Gruß Aristo

[MudGuard]

Hi,

Klappt aber nicht (weder IE, noch FF). Weiß jemand warum?

Doch. Es klappt. Es ist zentriert.
Da es aber so breit ist wie der Viewport, siehst Du das nur gar nicht richtig.

Für .footer hast Du explizit (Zeile 19ff in css_home.css) 100% für width festgelegt.
Für das darin befindliche div hast Du keine explizite Breitenangabe gemacht, also gilt der Wert auto, der auf 100% rausläuft.

Da die Elemente also so breit wie der jeweils umgebende Block sind, ist gar kein Platz für irgendwelche Zentrierung.

Machs doch so:
div.footerborder entsorgen
div.footer bekommt eine obere weiße border, außerdem text-align:center
das div im div.footer wegwerfen.
Gleiches gilt für die div um die einzelnen form-Elemente.
Die form-Elemente bekommen ein display:inline

cu,
Andreas