Wie im vorangehenden Kapitel erwähnt; ein block-level Element wählt immer die ganze verfügbare Breite (nach links und rechts so weit wie möglich).
Durch festlegen einer width für ein block-level Element wird verhindert dass es sich ausdehnt nach rechts und links soweit es geht im Container.
Setzte das margin auf auto zum zentrieren des Elementes innerhalb des Container.
Das Element mit einer definierten Breite(width) wird den verbleibenden Leeraum in zwei gleich Margins aufteilen und das Element ist zentriert:
Dieses <div> Element hat ein Breite von 800px und das margin wurde auf auto gesetzt.
Bemerke: Das Problem mit dem <div> unten ist, wenn das Browser-Fenster schmaler ist als die Breite des Element.
Der Browser fügt dann eine horizontale Bildlaufleiste(scrollbar) hinzu.
Benütze max-width stattdessen in dieser Situation, es wird verbessern das Browser-Handhabung mit schmalen Screens.
Dies ist wichtig wenn sie die Page auf schmaleren Geräten verwenden möchten:
Dieses <div> Element hat ein maximale Breite von 800px und das margin wurde auf auto gesetzt.
Tip: Verändere das Browser-Fenster kleiner als Breite 800px um den Unterschied zwischen den zwei divs zu sehen!
Hier ist ein Beispiel für die zwei divs unten:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 800px;
margin: auto;
border: 3px solid orange;
}
div.ex2 {
max-width: 800px;
margin: auto;
border: 3px solid black;
}
</style>
</head>
<body>
<h4>CSS Max-width(maximale Breite)</h4>
<div class="ex1">Dieses div Element hat ein Breite von 800px;</div>
<div class="ex2">Dieses div Element hat ein maximale Breite von 800px;</div>
<p><strong>Tip:</strong> Ziehe das Browser-Fenster schmaler als eine Breite von 800px um den Unterschied zwischen den zwei divs zu sehen!</p>
