CSS 2.1: `width`

Erläuterungen

Diese Eigenschaft bestimmt die Breite des Inhalts von Block- und replazierten Elementen. width ist nicht anwendbar auf die Elemente tr und tbody und auf nicht-replazierte Inline- Level- Elemente (deren Breite durch ihren Inhalt bestimmt wird). Inline- Boxes richten sich innerhalb der Zeilen aus, deren Breite wiederum von der Breite des einschließenden Blocks abhängig ist.

Der Berechnete (und vererbte) Wert ist stets der spezifizierte Wert, relative Längenwerte werden umgerechnet in absolute Längenwerte. Wenn die Eigenschaft nicht zutrifft, wird der Berechnete Wert auf auto gesetzt.

Wichtig zu beachten ist, dass im IE/Win 5.x derselbe Breitenwert durch die falsche Interpretation des Box- Modells völlig veränderte Ausmaße annehmen kann (siehe auch Bild rechts). Abhilfe schafft da nur der Box- Modell-Hack, mit dem man die falsche Darstellung durch nicht standardskompatible Browser korrigieren kann. IE/Win 6 gibt das Webdokument im Quirks-Modus aus, wenn kein oder nur ein unvollständiger HTML- Dokumententyp deklariert wurde.

Erlaubte Werte

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

'width' <length> | <percentage> | auto | 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 einschließenden Blocks des Elements bezogen ist. Wenn die Breite des einschließenden Blocks nicht explizit angegeben ist, dann wird dieser Wert wie auto interpretiert.; Wenn der umschließende Block eine Tabellenzelle oder durch float positioniert ist, dann ist seine Breite von der Breite des aktuellen Elements abhängig. Ist in diesem Fall die Breite des aktuellen Elements als Prozentwert definiert, dann ergibt sich hier ein Widerspruch und nach CSS 2.1 ist das daraus resultierende Layout ungültig.; Prozentwerte sollen laut CSS 2.1 nicht mehr als umgerechnete Absolutwerte weiter vererbt werden. Der berechnete Wert (das ist der Wert, der vererbt wird) kann jetzt auch Prozente als Wertangabe haben.
auto (Ausgangswert): Das Anwenderprogramm berechnet die Breite mit Hilfe anderer Breitenangaben. Insgesamt gilt, dass die Summe aus left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right und right gleich der Breite des einschließenden Blocks sein muss.; Sind zuviele dieser Maße nicht gegeben, d.h. mit dem Ausgangswert auto belegt, werden in genau definierter Reihenfolge die Werte auto durch '0' ersetzt, bis eine eindeutige Position für das Element gefunden ist. Sind Überbestimmungen vorhanden, dann wird der Wert für left ignoriert, wenn der Wert für direction = rtl ist. Der Wert für right wird ignoriert, wenn der Wert für direction = ltr ist.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

#left-menu { width:10em; }

Browserunterstützung

Die Eigenschaft width wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

Firefox, Camino, Mozilla etc.: Wenn ein Prozentwert deklariert wurde, vererbt die Gecko-Engine den deklarierten Wert, nicht den daraus resultierenden berechneten Wert.
IE 7: IE/Win verebt zwar keine Prozentwerte, kann aber nicht den Wert inherit erkennen.

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,
max-width, min-width,
padding-right, border-right-width, margin-right, right

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Sie wird von fast allen Mobilgeräten erkannt, aber von einigen nur als Maßstabsfaktor verwendet, um größere Elemente entsprechend den Abmessungen des Displays zu verkleinern. Die Eigenschaft width ist also ebenso wie das HTML-Attribut width kein Garant dafür, dass ein Element wirklich in der notierten Größe dargestellt wird.