Dynamische Boxen
Ab einer Bildschirmbreite von 940 Pixel sehen Sie oberhalb eine
Boxen-Reihe mit 3 Boxen nebeneinander sowie unterhalb eine Boxen-Reihe
mit 2 Boxen nebeneinander. Diese Boxen sind dynamisch und flexibel,
denn sie passen sich automatisch bezgl. der Höhe an, so das alle Boxen
auf einer Linie gleich abschließen, egal wieviel Inhalt die einzelne
Box hat. Die Box mit dem meisten Inhalt bestimmt also die Höhe aller
Boxen in einer Reihe, d.h. die anderen Boxen mit weniger Inhalt passen
sich automatisch an.
Das funktioniert deshalb, weil wir diese div-Container nicht mit "float" belegen.
Statt dessen bekommt der entsprechende äußere div-Container den Wert display:table sowie der innere div-Container den Wert display:table-cell.
Das bewirkt, das sich die Boxen wie normale HTML-Tabellen verhalten.
Ein weiterer Vorteil ist die vertikale Anordnung des Inhalts (oben,
mitte, unten) welche jetzt ganz leicht mit dem Befehl "vertical-align:
top/middle/bottom" funktioniert. Auf den verlinkten Seiten "Information
1-4" zeigen wir die vertikale (sowie horizontale) Ausrichtung im Beispiel.