Ein Container ist der begrenzende Rahmen, der die Breite des Inhalts festlegt und ihn im Fenster zentriert. Ohne ihn liefe der Text auf breiten Bildschirmen über die volle Fensterbreite und wäre kaum noch lesbar.
- Container (Layout)
Begrenzender Rahmen, der die Breite des Inhalts festlegt und ihn im Fenster zentriert.
Beispiel: „Der Container begrenzt den Inhalt auf 1280 Pixel und hält links und rechts 24 Pixel Abstand.“Auch: Wrapper. Der Zusatz „Layout“ grenzt den Begriff gegen Container in der Softwareverteilung und gegen Container Queries in CSS ab.
Abgrenzung zur Sektion: Die Sektion ist ein inhaltlicher Abschnitt. Der Container ist das Maß, auf das der Inhalt innerhalb dieses Abschnitts begrenzt wird.
Welche Breite sinnvoll ist
Für reinen Fließtext gelten 60 bis 75 Zeichen je Zeile als gut lesbar, was bei üblicher Schriftgröße rund 680 bis 760 Pixel ergibt. Für Seiten mit Rastern und Bildern sind 1200 bis 1400 Pixel verbreitet, weil dort die Zeilenlänge nicht das Maß ist.
Viele Websites führen deshalb zwei Breiten: eine schmale für Texte und eine weite für alles andere. Farbflächen laufen dagegen oft über die volle Fensterbreite, während ihr Inhalt wieder im Container sitzt.
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 24px; /* haelt Abstand zum Fensterrand */
}
.container--text { max-width: 720px; }Warum der Innenabstand dazugehört
Eine Begrenzung auf 1280 Pixel allein genügt nicht: Auf einem Fenster von genau 1280 Pixeln klebt der Text dann an beiden Rändern. Der Innenabstand sorgt dafür, dass bei jeder Fensterbreite Luft bleibt, und ersetzt eine zusätzliche Abfrage für schmale Bildschirme.
Auf dem Smartphone gehört derselbe Abstand links und rechts an jeden Inhalt. Fehlt er an einer Stelle, fällt das sofort auf, weil die Kanten der Absätze nicht mehr auf einer Linie liegen.
Woran Container scheitern
An Elementen, die aus ihm ausbrechen sollen, etwa Bildergalerien über die volle Breite. Wer dafür negative Außenabstände einsetzt, erzeugt auf schmalen Bildschirmen waagerechtes Scrollen. Sauberer ist es, die Farbfläche außerhalb des Containers zu setzen und den Container darin zu wiederholen.
Der zweite Fall sind geschachtelte Container: Liegt ein Container in einem anderen, addieren sich die Innenabstände, und der Inhalt rückt mit jeder Ebene weiter nach innen.