✔ Problem mit Zentrierung

[blizz-faad]

Hallo,
ich habe ein komisches Problem in CSS obwohl ich den Code schon öfters hernehme lässt sich folgende DIV-Box einfach in keinem Browser (IE, FireFox, Safari) zentrieren (horizontal). Die DIV-Box befindet sich immer Links oben.

CSS-Datei:

body { margin: 0px; padding: 0px; background: #5252BE; font-family: Arial; font-size: 12px; color: #FFFFFF; font-weight: bold; }

div.container_acp { position: relative; margin-left: auto; margin-right: auto; width: 750px; border: 1px solid #FFFFFF; background: #1F1FA9; margin: 10px; }
div.container_acp_header { float: left; width: 730px; background: #000080; padding: 5px; padding-left: 15px; background-image: url(../img/img_icon.png); background-repeat: no-repeat; }
div.container_acp_navi { float: left; width: 149px; border-right: 1px solid #FFFFFF; background: #1F1FA9; padding: 5px; }
div.container_acp_content { float: left; width: 580px; background: #1F1FA9; padding: 5px; }
div.container_acp_footer{ float: left; width: 740px; background: #000080; padding: 5px; text-align: right; font-size: 11px; color: #FF9C00; }

Index-Datei:

<div class="container_acp">
  <div class="container_acp_header"></div>
  <div class="container_acp_navi"></div>
  <div class="container_acp_content"></div>
  <div class="container_acp_footer"></div><div style="clear: left;"></div>
</div>

 

[Maik]

Hi,

die Ursache liegt hier in der margin:10px-Deklaration am Ende des Regelblocks für .container_acp, die die Regeln zu Beginn (margin-left:auto, margin-right:auto) überschreibt. Vielleicht ist hier stattdessen margin-top:10px erwünscht.

Diese Code-Zeile

<div class="container_acp_footer"></div><div style="clear: left;"></div>

lässt sich übrigens auch verjüngen:

<div class="container_acp_footer"></div>

div.container_acp_footer{ clear: left; width: 740px; background: #000080; padding: 5px; text-align: right; font-size: 11px; color: #FF9C00; }

mfg Maik