CSS width - Breite der Elemente festlegen

In CSS kann man mit der Eigenschaft width den Block-Elementen eine Breite zuweisen. Bei Inline-Elementen ist das zwar auch möglich, jedoch nur bei den Elementen, die replaced sind. Damit sind Elemente gemeint, die ersetzt werden und ihren Ursprung außerhalb der Datei haben. Das ist z.B. bei Bildern der Fall.

width bei Block- und Inline-Elementen

Standardmäßig wird mit der Eigenschaft width die Breite des Bereichs angegeben, der im Box-Modell content-box genannt und mit dem der Bereich für die Inhalte definiert wird. Etwaige Innenabstände (padding) oder Rahmen (border) nehmen ihren Platz außerhalb von content-box ein. Es ist jedoch möglich, das Box-Modell mit box-sizing umzustellen. Nachfolgend ist die Syntax für die Angabe der Breite anhand eines Beispiels abgebildet.

CSS-Code mit width

Angabe des Werts für die Breite

Als Wert kann man nicht nur einen numerischen Wert mit der Einheit px eintragen. Die folgenden Werte und Einheiten sind ebenfalls möglich. Diese werden jedoch nicht durch alle Browser unterstützt. Der Platzhalter <Zahl> ist dabei durch einen numerischen Wert zu ersetzen. In runden Klammern am Ende jedes Eintrags ist die Erläuterung dazu.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf das umgebende Block-Element)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • auto (Standardwert, überlässt die Berechnung dem Browser)
  • inherit (Vererbt vom Elternelement)
  • initial (Setzt auf den Standardwert)

Sonstige Keyword-Werte (zum Teil experimentell)

  • min-content (Kleinste intrinsische Breite)
  • -webkit-min-content (Browser-Präfix für min-content in Chrome, Safari, Opera)
  • -moz-min-content (Browser-Präfix für min-content in Firefox)
  • max-content (Bevorzugte intrinsische Breite)
  • -webkit-max-content (Browser-Präfix für max-content in Chrome, Safari, Opera)
  • -moz-max-content (Browser-Präfix für max-content in Firefox)
  • intrinsic (früherer Vorschlag für max-content, z.T. von Browsern implementiert)
  • fit-content (Passend zum Inhalt)
  • -webkit-fit-content (Browser-Präfix für fit-content in Chrome, Safari, Opera)
  • -moz-fit-content (Browser-Präfix für fit-content in Firefox)
  • available (Verfügbare Breite)
  • fill-available (Keyword für available in Chrome)
  • -moz-available (Browser-Präfix für available in Firefox)
  • border-box (Zusatz, falls genutzt, gilt Wert/Einheit für border-box)
  • content-box (Zusatz, falls genutzt, gilt Wert/Einheit für content-box)
  • unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Breite mit calc() berechnen

Mit width wird gemäß dem Standard Box-Modell die Breite des Inhaltsbereichs (content-box) angegeben und etwaige Abstände und Rahmen werden dazu addiert. Das sorgte bei prozentualen Breitenangaben für Probleme, wenn den Elementen gleichzeitig Abstände oder Rahmen zugewiesen wurden. Denn, gibt man z.B. 50% für die Breite ein und für den Rahmen 4px, ist die Box 4px breiter als 50% des Anzeigebereichs und man kann keine zwei Elemente nebeneinander positionieren.

Es musste also eine Lösung her, um einen berechneten Wert in der Form "<x>% - <x>px" anzugeben. Ab CSS3 ist hierfür calc() vorgesehen. Die Formel für die Berechnung wird innerhalb der runden Klammern eingetragen. Näheres dazu steht unter Berechnung mit calc(). Nachfolgend ist ein Beispiel abgebildet.

width mit calc berechnen

Überschreiben des Werts durch min-width oder max-width

In manchen Fällen kann es passieren, dass man in einer CSS-Regel neben der Eigenschaft width zusätzlich mit min-width eine Mindestbreite oder max-width eine maximale Höhe angegeben hat. Die Eigenschaften min-width oder max-width überschreiben den Wert von width.

Breite für Bilder auf Websites mit responsive Design

Auf Websites mit responsive Design benötigt man eine Lösung, in der die Bilder automatisch skaliert werden, wenn der Anzeigebereich kleiner ist als das Bild. Hierfür kann man die folgende CSS-Regel verwenden.

img {
max-width: 100%;
height: auto;

/* Für Firefox */
width: 100%;
}

Normalerweise sind die ersten beiden Angaben ausreichend. Dadurch wird erreicht, dass das Bild maximal die Breite des verfügbaren Anzeigebereichs hat. Leider funktionierte das mit Firefox 38 nicht wie gewünscht. Daher musste der dritte Eintrag für Firefox gemacht werden. Das sorgte wiederum dafür, dass kleine Bilder auf 100% vergrößert wurden. Das Problem konnte wiederum dadurch gelöst werden, indem man den Elementen, in denen die Bilder positioniert wurden, die Eigenschaft float: left; zuwies. Damit keine anderen Elemente das Bild umfließen, wurde außerdem den jeweils folgenden Elementen die Eigenschaft clear: both; zugewiesen, um am Ende das gewünschte Ergebnis zu erreichen.

Verhalten bei großen Inhalten mit overflow beeinflussen

Standardmäßig erfolgen bei langen Texten an den Leerzeichen automatisch Zeilenumbrüche und wenn die Box in der Höhe nicht beschränkt ist, vergrößert sich die Box. Werden übergroße Inhalte eingefügt, die nicht umgebrochen werden können, z.B. lange Wörter oder Bilder, dann ragen sie standardmäßig über den rechten Rand hinaus.

Lange Texte und Wörter in einer Box

Das Verhalten übergroßer Inhalte kann mit der Eigenschaft overflow beeinflusst werden. Damit kann z.B. festgelegt werden, dass der hinausragende Teil versteckt wird oder automatisch Scrollleisten an der Box eingeblendet werden.

Verhalten übergroßer Inhalte mit overflow

Wenn man möchte, dass die Breite bei übergroßen Inhalten automatisch ausgedehnt wird, kann man die Eigenschaft min-width verwenden. Damit erhält man eine gewisse Flexibilität und die Breite der Box kann bei Bedarf vergrößert werden.