CSS für Anfänger: Der normale Fluss von div-Boxen

CSS für Anfänger: Document Flow von div-Boxen

CSS - Cascading Style Sheets

Normalerweise folgen die HTML-Elemente auf einer Webseite dem sogenannten document flow, dem ‚Fluss des Dokumentes‘. Alle HTML-Elemente schwimmen in diesem Fluss.

Begriffserläuterung:

  1. Ein einzelnes Element wird soweit wie möglich links und oben positioniert.
  2. Wenn weitere Elemente dazu kommen, werden diese jeweils rechts davon angeordnet, und zwar so lange, bis kein Platz mehr vorhanden ist.
  3. Wenn rechts kein Platz mehr ist, rutschen sie eine Zeile tiefer und beginnen wieder ganz links.

Erst durch diese sogenannte Wirkung des Flows werden Webseiten flexibel und können von den Webdesignern wie von Architekten geplant und aufgebaut werden.

Der normale Fluss der Boxen

Ich möchte Ihnen an Hand eines kleinen Beispieles zeigen, wie der Flow funktioniert und wie sich die Boxen auf einer Webseite verhalten.

a) 3 Boxen im Fluss

Schauen Sie sich folgendes HTML und CSS an:

HTML:

<body>
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</body>

CSS:

body {
  color: black;
  background-color: gray;
  padding: 0;
  margin:0;
}
div {
  background-color: white;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

Weil <div> ein Block-Element ist, stehen die 3 Kästen untereinander, auch wenn sie nur wenig Inhalt haben.

Grafik 1: Block-Elemente werden so breit, wie es geht und stehen untereinander

3 div-Boxen im Fluss

Demo ansehen

Ein Block-Element nimmt immer die verfügbare Breite des Eltern-Elements ein, in diesem Falle also von body.

Unterschied zwischen Block-Element und Inline-Element
Ausführliche Infos: CSS4You

b) 3 verkürzte Boxen im Fluss

Im nächsten Schritt werden in meinem Beispiel die 3 div-Geschwister mit width auf 40% verkürzt. Alles andere bleibt unverändert.

Geänderte CSS-Formatierung:

div  {
      width: 40%;
      background-color: white;
      padding: 10px;
      border: 1px solid black;
      margin: 5px
  }

Als Ergebnis stehen auch die verkürzten <div>-Boxen weiterhin untereinander (Grafik 2). Dies geschieht, weil <div> ein Block-Element ist und Block-Elemente haben einen integrierten Zeilenumbruch. Mit der CSS-Eigenschaft width werden die Boxen zwar verkürzt, der Zeilenumbruch bleibt aber bestehen.

Grafik 2: Drei kurze Boxen bleiben untereinander

Drei kurze Boxen im Fluß und verkürzt

Demo ansehen

Quellen:

a) Little Boxes – Teil 1

Little Boxes - Teil 1

b) Webseiten
Little Boxes – Webseiten gestalten mit HTML und CSS
Little Boxes 1 – Online lesen
Little Boxes – Beispieldateien

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

Ein Gedanke zu “CSS für Anfänger: Der normale Fluss von div-Boxen

  1. Pingback: CSS für Anfänger: Unterschied zwischen relativer und absoluter Positionierung | Suras Weblog

Schreib einen Kommentar

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