CSS 2.1: `min-width, max-width`

Erläuterungen

Diese Eigenschaften erlauben es, einen kleinstmöglichen bzw. einen größtmöglichen Wert für die Elementbreite zu deklarieren. Die Eigenschaften max-width und min-width wirken zusammen, sie sind aber nur zwei der Eigenschaften, die den berechneten Wert der Elementbreite beeinflussen.

Die endgültige horizontale Lage und Ausdehnung eines Elements kann von einer ganzen Reihe anderer Eigenschaften (siehe unter Wechselwirkungen) sowie der Breite des umschließenden Blocks abhängig sein. Die folgenden drei Punkte verdeutlichen, wie die Berechnung der Elementbreite durch max-width und min-width beeinflusst wird. Diese Schleife kann auch mehrmals durchlaufen werden. Die Beschreibung klingt zwar etwas kompliziert, aber es hilft, sich das Ganze einmal grafisch vorzustellen.

Der berechnete Wert für die Breite des Elements wird vorläufig unter Berücksichtigung der gegebenen anderen Werte bestimmt. Hierbei werden max-width und min-width noch nicht mit einbezogen.
Wenn der berechnete Wert für min-width größer als der deklarierte Wert für max-width ist, dann erhält max-width denselben Wert wie min-width.
1. Wenn die berechnete Breite des Elementes größer als der für max-width gegebene Wert ist, dann wird die Elementbreite nach Punkt 1 erneut bestimmt, jedoch geht der Wert für max-width als aktueller Wert für die Elementbreite in die Berechnung ein.
2. Wenn die berechnete Breite des Elementes kleiner als der für min-width gegebene Wert ist, dann wird die Elementbreite nach Punkt 1 erneut bestimmt, jedoch geht der Wert für min-width als aktueller Wert für die Elementbreite in die Berechnung ein.

Das Anwenderprogramm darf selbständig einen nicht-negativen Minimalwert für min-width einsetzen. Dieser kann von anderen Eigenschaften abhängig sein und von Element zu Element variieren. Sollte min-width diesen Minimalwert unterschreiten, darf das Anwenderprogramm den errechneten Minimalwert als berechneten Wert weiterverwenden.

Berechnungsbeispiel

Angenommen, unser Layout besteht aus einer Menüspalte links und einer Spalte für den Inhalt rechts. Beide Spalten sind als Block- Level- Elemente notiert. Die linke Spalte ist fest 250 Pixel breit, die rechte Spalte (#textspalte) nimmt den Rest ein. Wenn dieses Layout mit dem Firefox- Browser auf einem 1024×768 Pixel großen Bildschirm ausgegeben wird, stehen 1009 Pixel in der Breite zur Verfügung. Unser Stylesheet enthält diese Regel:

body: { font-size: 15px; } #textspalte { padding: 1em; border: none; margin: 1em; max-width: 650px; min-width: 450px; }

Der Browser berechnet die Breite unserer Textspalte jetzt folgendermaßen:

1. Schritt: (1em = 15px): Die Eigenschaft width hat den Ausgangswert auto. Deshalb wird sie anhand der anderen gegebenen Werte vorläufig bestimmt:
width = 1009px - 250px - 15px - 0px - 15px - 15px - 0px - 15px = 699px.
2. Schritt:: Der Wert für max-width ist größer als der Wert für min-width.
3. Schritt:: Der berechnete Wert von 699px ist größer als der deklarierte Maximalwert von 650px. Deshalb wird der 1. Schritt wiederholt mit dem Wert von 650px für width.
1. Schritt (Wiederholung):: Da die Eigenschaft width jetzt einen festgelegten Wert hat, ergibt sich eine Überbestimmung für die Breite. In dem Fall erfolgt die Berechnung nach dem Verfahren 'Block- Level- Elemente im normalen Elementfluss, nicht replatziert'. Die praktische Folge dieser komplizierten Berechnung ist einfach, dass die berechnete Breite durch die deklarierte Maximalbreite ersetzt wird und die margins ihre Werte behalten.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'min-width' <length> | <percentage> | inherit

'max-width' <length> | <percentage> | none | inherit

<length>: Eine absolute oder relative Längenangabe. Negative Werte sind nicht erlaubt.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Eine Prozentangabe, die auf die Breite des umschließenden Blocks des Elements bezogen ist.
none (Ausgangswert) (nur für max-width möglich): Das Element hat keine festgelegte maximale Breite.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

#left-menu { min-width: 9em; max-width: 12em; }

DIV OL { max-width: 80%; }

Browserunterstützung

Die Eigenschaften max-width und min-width werden von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE 7: IE 7 missachtet min-width, wenn gleichzeitig überbreite margins und width:auto gegeben ist. Umgekehrt ist aber die Darstellung von max-width bei zu schmalen margins in Ordnung.
IE/Win 5.5, IE/Win 6: IE/Win bis Version 6 erkennt beide Eigenschaften nicht.
IE/Mac 5.5: IE/Mac unterstützt beide Eigenschaften nicht.
Safari 1.3: Der Apple-Browser stellt diese Eigenschaften nur für Elemente, die nicht positioniert sind, korrekt dar.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

left, margin-left, border-left-width, padding-left,
width, min-width,
padding-right, border-right-width, margin-right, right

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Deshalb sollte man sie nicht verwenden, auch wenn sie von einigen wenigen Kleingeräte-Browsern, unter ihnen Opera Handheld, realisiert wird.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Spezifizierter `%`-Wert oder absolute Länge oder `none`	Nein	Auf alle Elemente, Ausnahme: nicht-replazierte Inline- Level- Elemente und Tabellen	Breite des umschließenden Blocks	Visual