"margin: auto" und IE

[Arndtinho]

Hallo,

ich bastel gerade an einem neuen Layout. Dabei wird das Div "body_head" vom Div "body_main" überlagert. Das Div "body-head" geht über die gesamte Breite des Browserfensters. Das Div "body_main" soll zentriert dargestellt werden. Im Firefox funktioniert das ohne Probleme nur der IE macht mal wieder Ärger. Dort wird das Div "body_main" am linken Rand des Browsers angezeigt. Hier ist der Code des CSS-Files:

html {
   height:           100%;
}

body {
   height:           100%;
   margin:           0%;
   padding:          0%;
   background-color: #ccc;
}

#body_head { 
   position:         absolute;
   background-image: url( bg_body_head.jpg );
   width:            100%; 
   height:           60px;
   left:             0px; 
   top:              0px;
   z-index:          1; 
}

#body_main { 
   position:         absolute;
   width:            898px; 
   height:           300px;
   margin-left:      auto;
   margin-right:     auto;
   left:             0px;
   right:            0px;
   top:              25px; 
   z-index:          2; 
}

Was ist die Ursache für das Darstellungsproblem und wie kann ich es bewerkstelligen, dass das Div "body_main" auch im IE zentriert wird?

Viele Grüße
Arndtinho

 

[Maik]

Hi,

der Grund ist die absolute Positionierung der Box, dass der IE sie am linken Fensterrand ausrichtet, und die margin:auto-Deklaration ignoriert.

Entweder positionierst du #body_main relativ, oder du setzt folgende Angaben ein, damit die Box horizontal zentriert wird:

#body_main {
   position:         absolute;
   width:            898px;
   height:           300px;
   margin-left:      -449px; /* negative Hälfte von width:898px */
   left:             50%;
   top:              25px;
   z-index:          2;
}

 

[Arndtinho]

Guten Morgen,

danke für die Tipps.
Das werde ich dann gleich mal testen.

Viele Grüße
Arndtinho

 

[Arndtinho]

Hallo,

@Maik

Es ist zwar nicht ganz mittig positioniert aber besser als nix. Danke Dir.

[edit]Habe anstatt 50% nun 55% genommen. Jetzt passt es halbwegs denke ich.[/edit]

Viele Grüße
Arndtinho

 

[Maik]

Dann wird da entweder mit der Elementbreite (zu schmal) oder mit der margin-left-Deklaration (zu hoch) etwas nicht stimmen, wenn die Box nicht exakt in der Mitte sitzt, und du ihre Position von links auf 55% erhöhen musst.

 

[Arndtinho]

mhh... ich schaue es mir am we mal in ruhe an.
danke dir.

gruß
arndtinho