CSS Problem bei Firefox

[sandmaus]

Hallo Ihr,
ich komme mit einem Überlauf bei Firefox innerhalb meiner CSS nicht zurecht, bei IE funktioniert es.

Die Quelle:

Code: Alles auswählen

<div id="webseite">
<div id="links">123</div>
<div id="rechts">345</div>
</div>

Mein CSS:

Code: Alles auswählen

#webseite {
display:block;
margin:0 auto;
padding:0;
height:100%;
width:900px;
background-color:#000000;
}

#links {
float: left;
width: 600px;
background-color:#FFFFFF;
}

#rechts {
float: left;
width: 300px;
background-color:#999999;
}

Wenn im Linken Container ein langer Text eingefügt wird, wird bei Firefox dieser Container über den Hintergrund von div "webseite" hinausgeschoben.
Habe ich ein clear übersehen?

Danke für Hinweise

Grüsse Sandmaus

[Richard.Laing]

hallo sandmaus

Code: Alles auswählen

#webseite {
margin:0 auto;
padding:0;
height:100%;
width:900px;
background-color:#000000;
overflow:auto;
}

overflow:auto; sollte hier der löser sein
gruß richy

[Ingo]

Was willst du denn erreichen? Das Verhalten des Firefox ist korrekt, weil du #website eine fixe Höhe gegeben hast (was in dem meisten Fällen eine Schnapsidee ist). Ich tippe darauf, dass du irgendwas Richtung Faux Columns suchst, sprich #website auf overflow: hidden setzen, die fixe Höhe rausnehmen und dafür ein vertikal zu kachelndes Hintergrundbild einsetzen, was den Eindruck gleichhoher Spalten erzeugt.

Alternativ zu der overflow-Anweisung (deren einziger Sinn darin besteht, dass #website so hoch wird wie seine Kinder) kannst du natürlich noch ein clearendes Element unter die beiden Spalten setzen - je nachdem ob du mit overflow: hidden für #website leben kannst.

Von overflow: auto rate ich ab, da es in manchen Browsern unnötige Scrollbalken erzeugt.

[ridgeback]

gebe meinen vorrednern recht.

allerdings kann ich dir aus erfahrung, schon allein wegen firebug, nur raten:
setze nach floats immer ein clear-element.
ich nehme hierfür meist ein <div class="clear"></div> und gebe diesem im css:
clear:both; margin:0px; padding:0px; height:0px; overflow:hidden;

über sinn und nutzen der weiteren angaben kann man streiten, so bin ich aber immer auf der sicheren seite.

ansonsten wie gehabt:
soll die höhe von #website immer so hoch sein wie das browserfenster, mach am besten von vornherein ein overflow-y:scroll; damit die scrollbar immer angezeigt wird und du dich drauf einstellen kannst.

ansonsten nimm das height:auto; aus #website raus.

Code: Alles auswählen

<div id="webseite">
<div id="links">123<div class="clear"></div></div>
<div id="rechts">345<div class="clear"></div></div>
<div class="clear"></div>
</div>

Code: Alles auswählen

#webseite {
display:block;
margin:0 auto;
padding:0;
_height:100%;
width:900px;
background-color:#000000;
}

#links {
float: left;
width: 600px;
background-color:#FFFFFF;
}

#rechts{
float: right;
width: 300px;
background-color:#FFFFFF;
}