Ich erstelle derzeit eine Homepage. Dabei habe ich Probleme mit der Zentrierung im IE7. (IE6 vernachlässige ich)
Mein Code sieht folgendermaßen aus: (vereinfacht)
<body>
<div id='header'></div>
<div id='wrapper'>
<div id='nav'></div>
<div id='content'></div>
<ul id='footer'></ul>
</div>
</body>
Dazu folgender CSS-Code:
html {
padding:0;
margin:0;
}
body {
width:900px;
margin:auto;
}
#wrapper {
position:relative;
}
#nav {
position:absolute;
height:100%;
width:145px;
}
#content {
margin:10px 16px 0px 185px;
min-height:720px;
}
Das Problem stellt sich wie folgt dar:
Der Wrapper-Div wird im IE7 nicht zentriert sondern klebt an der linken Seite.
Ich war darüber sehr verwundert, da ich den Code bereits bei einer anderen Seite problemlos verwende, und habe mich deswegen natürlich auf Fehlersuche begeben.
Letztendlich habe ich gesehen, dass ich nicht GENAU den gleichen Code verwende. Das Problem liegt an position:relative; von #wrapper. Ohne position:relative; wird #wrapper zentriert. Jedoch ist ohne position:relative; der #nav-Div nichtmehr 100% hoch (bzw. zu hoch - er orientiert sich dann ja an body und nichtmehr an #wrapper)
Wie kann ich es nun lösen, dass #nav 100% Höhe von #wrapper hat, #wrapper aber zentriert ist ?
Aber leider löst es nicht das Problem.