CSS für Anfänger: Float mit mehreren div-Boxen

Die CSS-Eigenschaft „float“ und ihre Einsatzmöglichkeiten

Das klassische Einsatzgebiet für die CSS-Eigenschaft Float ist die Positionierung von Grafiken in einem Fließtext. Lesen Sie dazu die genauen Erläuterungen in Little-Boxes 1 online.

„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 (Zitat: Little Boxes – Teil 1; Was heißt To Float?

Theorie:

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

The Styleworks – Layout
Jendryschik.de – Ausrichtung und Elementfluss

Maxdesign.com – CSS Floatutorial
Smashing Magazine – CSS Basics
w3schools – Float

Floats mit mehreren Boxen

Auf der Grundlage des Artikels Little-Boxes 1 online – 13.1 Text um Bilder fließen lassen von Dozent Peter Müller 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.

a) 3 Boxen ohne Float

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

HTML + CSS Formatierungen:

HTML:

<body>
<div id="eins">Box 1</div>
<div id="zwei">Box 2</div>
<div id="drei">Box 3</div>
</body>

CSS:

body {
color: black;
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 Breite und sehen so aus:

Demo ansehen

Wichtig:

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!!

b) 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:

CSS:

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.

Demo ansehen

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.

c) 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. Und zwar wird das Wort left (links) durch das Wort right (rechts) ersetzt!

CSS:

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.

Demo ansehen

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.

d)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.

Demo ansehen

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.

e)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 habe ich die Höhe von Box 1 auf 75px erhöht.

CSS:

#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.

Demo ansehen

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

Download aller 5 Float-Vorlagen

Beispieldateien herunterladen (2,9KB – Zip-Datei)

Quellnachweis:
Little Boxes – Teil 1

Littel Boxes - Teil 1

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

www.little-boxes.de

Floats mit mehreren Boxen

CSS Eigenschaft: float, Float Praxis, Float-Theorie, float:left;, float:right; schwebende Boxen, div-Boxen, Float-Tutorials, CSS/HTML-Tricks, www.little-boxes.de, Dozent Peter Müller, HTML, Webseiten gestalten,
Floats mit mehreren Boxen

Text um Bilder fließen lassen

Das klassische Einsatzgebiet für float ist die Positionierung von Grafiken in einem Fließtext. Um zu zeigen, wie float funktioniert, binden Sie auf der Startseite eine Grafik ein und lassen den Text auf der Seite drum herum fließen.
Text um Bilder fließen lassen

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Gedanken zu “CSS für Anfänger: Float mit mehreren div-Boxen

  1. Pingback: CSS für Anfänger: Float mit mehreren div-Boxen | Suras Weblog | responsive design | Scoop.it

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *