Wird die Webseite auf dem Smartphone angezeigt, hat sich die Ansicht als Single Page etabliert. Dies wird erzielt, indem die Anzahl der Spalten auf 1 und die Anzahl der Zeilen automatisch vergeben wird.

Im CSS kann das zweidimensionale und auf einem Raster basierende Layout System mit #display #grid aktiviert werden. Es eignet sich hervorragend für das Layout auf der Macro-Ebene. Das Raster kann vielseitig mit flexiblen oder fixierten Bereichen bestimmt werden.

Das Eltern-Element hat #display: #flex. Direkte Kinder haben #flex-basis: 100%. Bei einem #:hover ändert die #flex-basis auf 120%.

Wenn man relativ kleine Bilder hat und viel Text hat, dann kann auf #clear verzichtet werden. Der Text übt nämlich beim Float eine Höheninformtion im Float-Kontext aus.

Für besondere Situationen im Webdesign kann dieser Effekt sinnvoll sein.

Wie passe ich mein Layout für verschiedene Ausgabegeräte mit @MEDIA an?

Das Multi-column-Layout-Modul ist eine der Neuerungen des CSS3-Standards mehrspaltige Layouts darstellen, ohne dass HTML-Elemente für den Aufbau der einzelnen Spalten notwendig sind.

#floatsollte nur in Verbindung mit #CLEAR eingesetzt werden. In dem Beispiel kann sehr gut das Kollabieren des Eltern-Elements gezeigt werden, wenn #CLEAR nicht den #FLOAT beendet. Einfach die Eigenschaft #CLEAR im Footer entfernen: Sofort bricht die Höhe des Eltern-Elements zusammen.

Den großen Mehrwert bietet #grid bei komplexeren und responsiven Beispielen. Das gezeigte Beispiel könnte man ja sehr leicht ohne #grid bauen.

Elemente mit #position #absolute oder #fixed können mit #left 50% und #translateX( -50% ) horizontal zentriert.

Um zu zentrieren gibt es für jede Situation mindestens eine CSS-Methode.

Anstatt für jeden #float ein passendes Element für den #clear zu suchen, können wir uns mit der CLEARFIX Methode die Arbeit deutlich erleichtern.

Die Funktion der Werte #block und #inline sowie #none sind die wesentliche Grundlage und die häufigste Anwendung von #display. Da diese Werte per Standard vergeben werden, übersieht der Laie die Existenz der Eigenschaft #display häufig. Elemente mit #block beginnen eine neue Zeile und Elemente mit #inline können innerhalb von Text stehen.

Elemente mit #display: #none und alle Kinder-Elemente sind in der Anzeige des Browsers nicht da. Wird, z.B. mit #:hover, #none in einen anderen Wert geändert können Animationen abgespielt werden. Transparente Elemente hingegen nehmen ihren Platz ein.

Mit dem relativ jungen Bündel an Eigenschaften rund um #display: #flex lassen sich Zentrierungen und weitere Stylings einfach vornehmen. Horizontal und Vertikal geht damit.

#float funktioniert besser in Layouts mit festen Vorgaben für die Höhe. Dies beinhaltet auch Vorgaben für maximale Längen von Text. Wichtig: Wo #float genutzt wird muss in der Regel auch #clear erfolgen. Das wird hier über #after bei der #class „clearfix“ realisiert.

Ein überlappen ist möglich und Abstände zum Bezugspunkt #relative können exakt eingestellt werden.