Darstellungsproblem mit Firefox

[Christian]

Hallo,

ich bin gerade dabei ein ganz einfaches Layout mit CSS zu realisieren.
Das Problem ist, dass Firefox die Seite nicht so darstellt wie sie sein sollte, in IE ist alles okay. Nämlich wird das Padding des divs "content" am unteren Rand nicht berücksichtigt und die Linien an den Seiten gehen nicht ganz bis nach unten. Hier
CSS

Woran kann das liegen?

Danke im Voraus,

Christian

[Sebastian Gebhard]

Hallo,

ich bin gerade dabei ein ganz einfaches Layout mit CSS zu realisieren.
Das Problem ist, dass Firefox die Seite nicht so darstellt wie sie sein sollte, in IE ist alles okay. Nämlich wird das Padding des divs "content" am unteren Rand nicht berücksichtigt und die Linien an den Seiten gehen nicht ganz bis nach unten. Hier
CSS

Woran kann das liegen?

Danke im Voraus,

Christian

Das Phänomen (ich nenne es so, weil ich mir nicht sicher bin ob es Standart ist oder ein FF-Bug) tritt auf, wenn man floatende div-container (in deinem Fall left und right) in einem nicht floatenden container hat.
Gib deinem Container content einfah noch die Eigenschaft float:left; schon sollte es funktionieren.

Frag mich aber bitte nicht aus, warum genau das so ist.

Wenn jemand mehr weiß... mich würde es auch interessieren

[Christian]

Ja, jetzt funktionierts. Danke. Würd mich aber auch interessieren woran das wohl liegt.

[Antipitch]

Moin,

das hängt mit der Frage zusammen, in welchem Fall Elemente einer bestimmten flow/ position/ display Eigenschaft für Kindelemente mit ihrerseits eigenen/anderen flow/ position/ display Eigenschaften "containing blocks" konstituieren.

Für dieses Beispiel: #left und #right sind durch float aus dem normalen Dokumentfluss genommen. Sie werden zwar durch die Grenzen von #content (bzw. auch der h1) "aufgehalten", ansonsten "weiß" #content aber nichts von ihrer Existenz oder ihren Ausmaßen. Demgemäß wird #content (richtigerweise!) durch sie auch nicht in der Höhe aufgespannt.

Für das vorliegende Beispiel hätte es auch noch andere Lösungen gegeben. Bspw. ein block-level Element mit clear:both unterhalb von #right, aber innerhalb von #content (-> Stichwort "aufspannen"). Andere Möglichkeit: #right gar nicht floaten, sondern mit entsprechend großem margin-right neben #left platzieren.

Für eure weitere Erforschung dieser nicht unkomplexen Materie hier die Theorie dazu ;-)

Visual formatting model und Visual formatting model details

Gruß
Antipitch

[Antipitch]

Korrektur:

Andere Möglichkeit: #right gar nicht floaten, sondern mit entsprechend großem margin-right neben #left platzieren.

margin-left natürlich...

Gruß
Antipitch

[Gunnar Bittersmann]

Hello out there!

weil ich mir nicht sicher bin ob es Standart ist

Ich bin mir sicher, dass es kein Standart ist.

oder ein FF-Bug

Nein, kein Bug. Dass _float_ende Elemente nicht im normalen _Fluss_ sind, ist in CSS so spezifiziert und unter beider beiden Begriffen im Archiv recherchierbar.

See ya up the road,
Gunnar

[Sebastian Gebhard]

Ich bin mir sicher, dass es kein Standart ist.

Vielen Dank für den Hinweis, jetzt bin ich auch überzeugt, dass es kein Standart ist =D