Layout von HTML-Seiten mit <div> und <span>

Auf dieser Seite beschreibe ich, wie man verschiedene Bereiche auf einer HTML-Seite anordnet.
Grüne Elemente sind <div>-Elemente. Ich habe ihnen eine beige Hintergrundfarbe (background-color) und eine graue Umrandung (border) gegeben und festgelegt, dass um jedes <div>-Element etwas Spielraum (margin) bleibt. Dieser Spielraum hat keine Farbe; er ist transparent.
<div>-Elemente können nicht von Haus aus nebeneinander stehen.
Selbst, wenn genügend Platz dafür vorhanden wäre.
Bei <div>-Elementen ist nämlich das display-Attribut anfangs auf block gesetzt. Solche block-Elemente füllen immer den ganzen verfügbaren horizontalen Platz aus.
Dem gegenüber stehen <span>-Elemente. Sie nehmen horizontal nur soviel Platz ein, wie sie brauchen. Ich habe ihnen die Hintergrundfarbe lightpink gegeben. Auch ihnen haben ich einen margin gegeben. Von Haus aus haben sie keinen, und dann würden Sie die Lücken zwischen ihnen nicht sehen. Jetzt tun Sie's aber.

Beliebige hierarchische Anordnung mit display:inline-block

Dies ist auch ein solches <div>-Element. Es ist ein block-Element und hat daher maximale horizontale Ausdehnung (bzw. maximal bis auf den definierten margin, den man als weißen Rand rundherum sieht).

Dies ist ein untergeordnetes Element. Es ist das erste, daher steht es links.
Das zweite steht daneben. Warum kann es daneben stehen?

Und warum kann es mehrere Zeilen haben?

Die orangenen Elemente sind zwar auch <div>-Elemente, allerdings habe ich bei ihnen erstens die Hintergrundfarbe auf bisque (ein blasses Orange-Pink) und zweitens ihr display-Attribut auf inline-block gesetzt. Und somit

Sie können nur nebeneinander stehen, weil Ihr display-Attribut den Wert inline-block hat.

Und jetzt alles noch einmal. Was mich stört, ist, dass die Oberkanten von Element 1 und 2 nicht abschließen. Wie erreiche ich das?

Hier ist ein untergeordnetes Element. Es ist das erste, daher steht es links.

Das zweite steht daneben.

Es besteht aus mehreren Zeilen.

Die Oberkanten der orangenen Elemente schließen ab, weil ich ihr vertical-align-Attribut auf top gesetzt habe.

Natürlich kann ich auch drei Elemente nebeneinander stellen.

Das erst hängt oben, weil ich ihm inneren das Attribut style="vertical-align:top" gegeben habe. Eigentlich hätte ich das mit CSS machen sollen, also 
<div class="stick-to-top">
und dann im CSS 
.stick-to-top {vertical-align:top;}
Das zweite hängt unten, weil ich ihm inneren das Attribut style="vertical-align:bottom" gegeben habe.
Das dritte ist das größte.

Es geht von ganz oben bis danz unten. Sehen Sie aber, dass es dennoch nicht mehr horizontalen Platz einnimmt. Ich habe ihm eine feste Breite zugewiesen: ich habe sein width-Attribut auf 29% gesetzt. Warum 29%? Naja, weil drei davon reinpassen müssen, und 3*29 = 87, was noch genügend Platz für den Spielraum rundherum lässt, bevor alles auf 100% kommt.

Und natürlich kann diese auch wieder Unter-Elemente haben, in diesem Falle hier ein <div>.
Ich habe für diese beiden <div>-Elemente das display-Attribut nicht geändert, also steht es immer noch auf dem Anfangswert block, und sie füllen die gesamte (in Ihrem Eltern-Element verfügbare) Breite aus.

Generell: passen Sie bei diesen Raumaufteilungen auf, dass Sie (inklusive Spielraum) etc. nicht über 100% kommen. Denn dann rutscht eines doch wieder in die nächste Zeile, was eventuell schlecht aussieht.

Ich habe width:30%.
Ich auch!
Ich auch. Und ich musste eins weiter runter, weil es oben keinen Platz mehr gab. Zwar ist 3*30% = 90 < 100%, aber mit Rand drumherum (und mit dem Innenrad des blassgrünen Eltern-Elements sind wir anscheinend doch auf über 100% gekommen.

Unter-Elemente müssen natürlich nicht die gleiche Breite haben.

Zum Beispiel ist dieses hier etwas schmäler.

Dieses ist breiter.

Es hat mehrere Unter-Elemente.
Noch eins.
Noch eins.
Deren Breite ist flexibel, weil ich Ihrem width-Attribut keinen Wert hinzugefügt habe. Sie sind jetzt so groß, wie es der Text erfordert. Stoßen sie, zusammen mit Ihrem margin und dem padding Ihres Eltern-Elements allerdings an die Grenzen Ihres Eltern-Elements, dann fügt der Browser automatisch Zeilenumbrüche ein. Ich, der hier den Text geschrieben habe, muss mir über Zeilenumbrüche keine Gedanken machen.