Layout Methoden

Der natürliche Html-Flow:

Bei dem "natürlichen HTML-Flow" werden die Elemente, in der Reihenfolge ihres Erscheinens im HTML-Dokument, am Bildschirm angezeigt. Wie beim Lesen: von links nach rechts und von oben nach unten.

Blockelemente nehmen die gesamte Breite ein und passen sich der aktuellen Fenstergrösse automatisch an.

Beispiel: HTML-Flow

HTML-Code:
<div class="html-flow">
    <p>Paragraph 1 Der HTML-Flow: Von Links nach Rechts und von oben nach unten</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
</div>

Html-Flow: Die Verschachtelung und der HTML Stack:

Beispiel: Verschachtelung (nested Elements) oder die Matrjoschka Figuren

Auch die Kästchen im Kästchen im Kästchen folgen einer Ordnung.
Sie fangen oben links an,- weil sie Blockelemente sind (div).
- Die erste äussere Box (schwarz) ist das Unterste.
- Darin ist die rote Box als Kind
- Die gelbe Box ist in der roten Box
- Das p ist ganz oben drauf

HTML-Code:
<div class="opa">
    <div class="papa">
        <div class="son">
            <p>Ich bin gaaaanz oben auf dem HTML-Stack.</p>
        </div>
    </div>
</div>

Der HTML-Stack

Sie sehen nichts?
Kein Wunder, sie haben alle die gleiche Grösse und sind aufeinander gestapelt :-)

Html-Flow: Zu was ist er nun gut?:

Er organisiert den Inhalt der Seite

Er beinhaltet den Inhalt der Seite und überlässt dem jeweiligen Browsermodell das Grundstyling. Der Inhalt folgt dem logischen Aufbau eines Buches. Der HTML-Flow ist responsive und passt sich der jeweiligen Fensterbreite automatisch an.
Würde man keine weiteren Spalten benötigen, dann wäre die Seite jetzt fertig.

HTML ist nur für den Inhalt zuständig!
Das Styling mit CSS ist strikt getrennt (Webstandards).