Schritt 3: Gefloatete Elemente umschließen

Der einfachste Weg, um die gefloateten Grafiken innerhalb der umgebenden div-Elemente zu lassen, ist der Einsatz der Eigenschaft overflow mit dem Wert hidden.

Dazu wird das CSS wie folgt geändert:

div.galerie { 
  overflow: hidden; /* Der Trick zum Umschließen von floats */
  width: 500px; /* IE6 benötigt feste Breite */
  background-color: #eee; 
  padding: 10px;  
  border: 1px solid black; 
  margin: 0 3px 3px 0; /* Rechten Außenrand ggfs. anpassen */ 
}

Die Beispielseite sieht mit dieser in galerie03.css gespeicherten Ergänzung schon viel besser aus:

Schon besser - die Seite nimmt langsam Gestalt an

Die hellgrau hinterlegten div-Elemente umschließen jetzt wie beabsichtigt die Grafiken. Durch die Definition von overflow:hidden wird das umgebende Element gezwungen, darin gefloatete Elemente zu umschließen. Dieser Trick ist so einfach, dass viele Webdesigner es bis heute nicht glauben können.

Die Angabe einer festen Breite mit width ist übrigens genau genommen nur für den Internet Explorer bis zur Version 6 notwendig. Die feste Breite ist eine Möglichkeit, den div-Elementen das Merkmal hasLayout zu gibt, wodurch der IE6 die Kästen korrekt berechnet und darstellt. Mehr zu hasLayout erfahren Sie bei Bedarf in dem sehr detaillierten Artikel "On having layout" (in english).

Schritt 4: Bilderrahmen per CSS

Im letzten Schritt wird der hellgraue Hintergrund von den div-Elementen wieder entfernt und die Grafiken bekommen einen hübschen Rahmen. So sieht die fertige Seite aus: