CSS Float: Schwebende Boxen (Theorie und Praxis)

CSS-Eigenschaft Float: Schwebende Boxen (Theorie und Praxis)

Float: Schwebende Boxen (Theorie und Praxis)

„To Float“ heißt «schweben» – und eine schwebende Box macht 3 Bewegungen: Sie erhebt sich aus dem normalen Fluss, schwebt wie ein losgelassener Heißluftballon in der umgebenden Kiste auf der einen Seite nach oben und driftet dann je nach Windrichtung so weit es geht auf die andere Seite.

Theorie:

Auf den unten angeführten 4 Webseiten finden Sie ausführliche Anleitungen,  Erklärungen und Beschreibungen über die CSS-Eigenschaft float.

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
http://www.thestyleworks.de/tut-art/layout_div_2.shtml
http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php
http://hessendscher.de/workshop/index.html (Teil 6 -Floats)

Floats mit mehreren Boxen

Um Ihnen zu zeigen, wie float funktioniert, möchte ich mit ein paar einfachen Beispielen erklären, wie Sie die Float-Theorie in die Praxis umsetzen können. Sie werden danach das manchmal etwas seltsame Verhalten von Floats besser verstehen können.

3 Boxen ohne Float

Die Grundlage für die folgenden Beispiele bilden drei einfache, nicht gefloatete div-Boxen.

HTML                                                              CSS

<div id="eins">Box 1</div>                              body {
<div id="zwei">Box 2</div>                                   color: black;
<div id="drei">Box 3 </div>                                   background-color: gray;
                                                                          padding: 0;
                                                                          margin: 0;
                                                                      }
                                                                      div {
                                                                          font-weight: bold;
                                                                          width: 200px;
                                                                          height: 50px;
                                                                          padding: 10px;
                                                                          border: 1px solid black;
                                                                          margin: 5px;
                                                                      }
                                                                      #eins {
                                                                           background-color: #fff;
                                                                      }
                                                                      #zwei {
                                                                            background-color: #ddd;
                                                                      }
                                                                      #drei {
                                                                            background-color: #aaa;
                                                                      }

Die 3 div-Boxen haben verschiedene Hintergrundfarben, eine fixe Breite und eine vorgegebene Höhe und sehen so aus:

Gefloatete Boxen müssen immer eine mit width fix definierte Breite haben. Ohne diese Angabe wird die Breite von div-Boxen unberechenbar.
Bei Grafiken ist width nicht nötig, weil sie eine feste Breite haben, bei allen anderen gefloateten Elementen gilt die Faustregel: floaten immer mit width!

---

3 Boxen nach links floaten

In der ersten Übung werden alle 3 Boxen nach links gefloatet. Das CSS wird dafür nur an einer Stelle geändert (float: left):

div {
     float: left;
     font-weight: bold;
     width: 200px;
     height: 50px;
     padding: 10px;
     border: 1px solid black;
     margin: 5px;
}

Im Browser stehen die 3 Boxen jetzt nebeneinander.

Die erste div-Box schwebt an der rechten Seite der umgebenden Box (hier: body) so weit es geht nach oben und schwebt dann so weit es geht nach links rüber. Jede folgende Box macht genau dasselbe, bis die 3 Boxen nebeneinander stehen.

---

3 Boxen nach rechts floaten

In der zweiten Übung floaten Sie die 3 Boxen nach rechts. Dazu müssen Sie im CSS nur ein einziges Wort ändern:

div {
     float: right;
     font-weight: bold;
     width: 200px;
     height: 50px;
     padding: 10px;
     border: 1px solid black;
     margin: 5px;
}

Hier stehen die 3 Boxen auch nebeneinander, die Reihenfolge ist jedoch geändert.

Box 1 ist ganz rechts angeordnet, links daneben steht Box 2 und noch weiter links folgt Box 3. Dies kommt daher, dass Box 1 an der linken Seite des umgebenden Elementes ganz nach oben schwebt und dann soweit wie möglich nach rechts rüber schwebt; die anderen Boxen machen genau dasselbe.

---

Float und zu wenig Platz im Browserfenster

Sollte eine gefloatete Box im Browserfenster zu wenig Platz finden, springt sie automatisch eine Zeile tiefer. Die folgenden Grafik zeigt die 3 nach links gefloateten Boxen in einem verkleinerten Browserfenster.

Verkleinern Sie bitte das Browserfenster so weit, bis Box 3 eine Zeile tiefer springt. Wenn Sie das Fenster noch mehr verkleinern, wird Box 2 dies auch tun.

---

Float und verschieden hohe Boxen

Wenn gefloatete Boxen verschiedene Höhen haben, kann es vorkommen, dass einige Boxen an anderen hängen bleiben. Für das Beispiel wurde die Höhe von Box 1 auf 75px erhöht.

#eins {
     background-color: #fff;
     height: 75px;
}

Bei zu kleinem Browserfenster schwebt Box 3 nicht an den linken Rand, sondern bleibt an Box 1 hängen.

Um den Effekt sehen zu können, verkleinern Sie das Browserfenster, bis Box 3 an Box 1 hängen bleibt.

Beispieldateien (2,9KB Zip-Datei):

---

Quellnachweis:

Little Boxes – Teil 1

Webseiten gestalten mit CSS. Grundlagen.
Markt+Technik / 2007 / Dozent Peter Müller

www.little-boxes.de
Little Boxes, Teil 1 – Beispieldateien

---

Ähnliche Artikel:

HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
CSS-Menüs ohne Einsatz von Listenelementen