nicht angemeldet
Hallo Leute, sieht so aus als bräuchte ich mal wieder eure Hilfe.
Ich arbeite gerade an einer Seite, bei der mir das Floating-Verhalten des Firefox Probleme bereitet. Ich zeigs am Besten mal mit 2 Screenshots:
So solls wenns nach mir geht aussehen (und tuts auch im IE): http://img510.imageshack.us/my.php?image=ieeu9.jpg
Und der Firefox zeigt es so an: http://img186.imageshack.us/my.php?image=fffg1.jpg
Offensichtlich rutscht die Sidebar rechts im Firefox nicht bis nach oben durch. Das kuriose ist, dass, sofern ich im HTML-Code die Sidebar-Divs zuerst schreibe, der Firefox kein Problem damit hat. Erscheinen aber die nach linkgs gefloateten Divs zuerst, rutscht die Sidebar nicht bis nach oben durch.
Hier ein (vereinfachter) Quelltextauszug:
HTML:
<body>
<div id="page">
<div id="menu">
[DAS MENU OBEN]
</div>
<div id="header">
[DER KASTEN UNTER DEM MENÜ LINKS]
</div>
<div id="content">
[DER CONTENTBEREICH LINKS]
</div>
<div id="sidebar">
<div class="box">
[ABOUT-BOX IN SIDEBAR]
</div>
<div class="box">
[SUCHEN-BOX IN SIDEBAR]
</div>
...
</div>
</div>
</body>
CSS:
body {
margin: 0;
text-align: center;
}
#page {
width: 800px;
margin: 0 auto;
text-align: left;
}
#header {
margin: 5px 0;
width: 585px;
float: left;
height: 215px;
padding: 5px;
}
#content {
width: 575px;
padding: 10px;
float: left;
clear: left;
}
#sidebar {
width: 200px;
float: right;
margin-top: 5px;
}
#sidebar .box {
border: 5px solid #fff;
width: 180px;
padding: 5px;
margin-bottom: 5px;
}
Zum besseren Verständnis hier nochmal eine Übersicht, welcher Container was ist: http://img503.imageshack.us/my.php?image=bild2zu4.jpg
Ach und nur zur Info falls das gefragt wird: Sowohl XHTML-Code als auch CSS Code sind valide! Ich hab auch schon alle DIVS mal etwas kleiner gemacht, um sicherzugehen, das kein zu breiter Container einen float verhindert.
Vielleicht kann mir ja jemand einen Rat geben, oder mir zumindest erklären warum die Reihenfolge der DIVs von Bedeutung ist.
Vielen Dank im Vorraus.