nicht angemeldet
Reihenfolge von DIVs bei Float von Bedeutung?
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.
-
Ich habe mal weiter etwas mit der Reihenfolge rumrobiert und festgestellt, dass DIV-Container immer nur an einem Container vorbei-floaten, aber nicht an zwei (so wie es bei mir erforderlich wäre). Warum ist das so?
-
Vielleicht kann mir ja jemand einen Rat geben, oder mir zumindest erklären warum die Reihenfolge der DIVs von Bedeutung ist.
gruppiere deinen header und deinen content mit einem weiteren element, das dürfte das einfachste sein
-
gruppiere deinen header und deinen content mit einem weiteren element, das dürfte das einfachste sein
Ja, daran habe ich auch schon gedacht. Allerding bricht dann die chronische Divitis aus. Ich dachte nur, dass ich womöglich was falsch im Code mache, oder können divs maximal an einem Element vorbeifloaten?
-
Ja, daran habe ich auch schon gedacht. Allerding bricht dann die chronische Divitis aus. Ich dachte nur, dass ich womöglich was falsch im Code mache, oder können divs maximal an einem Element vorbeifloaten?
kommt auf den browser drauf an wie sich was wie genau verhält
divits bricht erst aus, wenn <div class="h1"> anstatt <h1> schreibst
ein paar elemente zu gruppieren ist imho in ordnung wenn es zweckdienlich ist
-
-