Verhindern das Firefox den Hintergrund verschachtelter Ebenen falsch darstellt

Ein kleines HTML / CSS Problem für mehrspaltige Layouts, welches sicher schon uralt ist, mir aber erst gestern begegnete.

Problem:

Defektes Layout bei werbespotsongs.de

Auf meinem grauen Seitenhintergrund befindet sich ein DIV-Bereich (div id="content) mit der Hintergrundfarbe weiß. Dieser Container enthält wiederum zwei DIV-Bereiche, welche nebeneinander stehen und ein zweispaltiges Layout bilden. Beide DIV Elemente sind transparent, denn es soll das weiß das content-DIVs durchscheinen.

Das alles wird im Internet Explorer und Opera korrekt angezeigt, Der Firefox zeigt jedoch für beide transparente Spalte nicht etwa die weiße Farbe des umgebenden Containers, sondern das grau des Bodys an.

Die Lösung:

Zweispalten Layout mit Extra-DIV

In dem umschließenden DIV-Element muss am Ende ein zusätzliches DIV eingesetzt werden. Dieses stellt ausdrücklich den normalen Dokumentfluß, float, wieder her.

Hier ein Beispiel, dass DIV muss aber nicht leer bleiben sondern eignet sich ideal für einen Hinweis oder sogar einen Footer.

<div style="clear: both; height: 1px;"></div>

Verwandte Artikel

6 Reaktionen

  1. Ulli on Juni 22nd, 2007

    Ein wirklich lästiges Problem. Ich bin nach einigem Herumprobieren auf die gleiche Lösung gekommen. Schade, dass ich diesen Beitrag nicht eher entdeckt habe. Hätte mir Zeit und Nerven gespart ;-)

  2. tm on Juli 1st, 2007

    Verdammt, endlich einen Betrag gefunden, der eine vernüftige Lösung liefert.

    Bist leider bei Google auf Seite XY ;-)

    Danke für’s Posten… und dabei kann es so einfach sein..

    _denhartenweg -> bookmark_

  3. Elisa on August 27th, 2007

    Vielen vielen Dank, das war meine Rettung!
    (Ich fing schon an, an mir selber zu zweifeln…)

    LG Elisa

  4. Alex on November 25th, 2007

    Das war ein wirklich brauchbarer Tipp!!

  5. Mike on März 4th, 2009

    Genialer Beitrag!!!
    Zum Glück bin ich rasch auf diese Seite gestossen! Fazit: Problem innert kürze gelöst!

    DANKE!

  6. Daniel on März 25th, 2009

    Danke!
    Wär ich nicht drauf gekommen…
    Chrome hatte dasselbe Problem wie der FF. Ach ja, und clear:left; geht auch.

Schreib einen Kommentar