Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

14.8 Methode 3: Ohne float und clear – overflow: hidden

Anfang 2005 verbreitete sich die Kunde, dass der britische Webdesigner Paul O'Brien (http://pmob.co.uk/) eine verblüffend simple Lösung für das Problem einschließender Floats gefunden hat:

  • Das umgebende Element bekommt die Eigenschaft overflow: hidden.

Und genau das wird im folgenden ToDo erledigt.

ToDo: Methode 3 – Floats einschließen mit overflow
  1. Kopieren Sie die Datei galerie_overflow.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
  2. Öffnen Sie galerie_overflow.html im Editor.
  3. Ergänzen Sie im folgenden Style die hervorgehobene Deklarationen:

    div.galerie {
      overflow: hidden;
      width: 500px;
      padding: 10px;
      padding-top: 25px;
      border: 1px solid black;
      margin: 0 3px 3px 0;
    }

  4. Fügen Sie in den Style-Block den Style für die Klasse clearing ein:

    .clearing { clear: both; }

  5. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Sie benötigen weder ein zusätzliches HTML-Element noch muss etwas gefloatet oder gecleart werden. Die Lösung scheint zunächst verblüffend einfach, aber natürlich gibt es auch für overflow:hidden ein paar gut versteckte Nachteile.

Die Eigenschaft overflow sagt dem Browser, wie er mit Inhalt umgehen soll, der nicht in das ihn umgebende HTML-Element passt. Dies ist besonders wichtig, wenn ein Element mit width oder height eine feste Breite oder Höhe bekommen hat.

Mögliche Werte von overflow sind:

  • visible. Standardwert. Der überfließende Inhalt wird angezeigt, die Größe des Elements aber nicht verändert. Der Inhalt läuft also einfach über den Rand des Elements hinweg. IE6 vergrößert das Element übrigens. Das ist zwar nett gemeint, aber nicht korrekt und seit V7 behoben.
  • scroll. Der überfließende Inhalt wird abgeschnitten, aber das Element bekommt Scrollbalken, damit der Inhalt zugänglich bleibt.
  • auto. Überlässt es dem Browser. Die meisten entscheiden sich für scroll.
  • hidden. Gefährlich. Überfließender Inhalt wird schlicht und einfach abgeschnitten.

In CSS ist nun festgelegt, dass overflow darin enthaltene gefloatete Elemente einschließt, sofern es einen anderen Wert hat als visible. Aus genau diesem Grund reicht im Beispiel overflow: hidden zum Einschließen der gefloateten Grafiken.

Das ist aber ein bisschen so, als ob Sie ein Medikament nur wegen der Nebenwirkungen schlucken. Die eigentliche Wirkung von overflow: hidden ist, überfließenden Inhalt abzuschneiden. Diese Methode ist deshalb zusammen mit einer festen Höhe riskant und führt beim Einsatz von CSS3-Eigenschaften wie box-shadow leicht zu abgeschnittenen Inhalten.

Im Umkehrschluss: Wenn die betroffenen Elemente keine feste Höhe haben, der Inhalt frei fließen kann und Sie box-shadow & Co nicht verwenden, dann kann overflow: hidden eine einfache Methode zum Einschließen von Floats sein.