Rechnen mit CSS3 calc()

Mit der Eigenschaft calc() wird es Dir möglich, mit reinem CSS Kalkulationen durchzuführen. Erlaubt sind die klassischen Grundrechenarten. Wie das funktioniert und welche Vorteile das bringt, erläutere ich Dir in diesem kleinen Artikel.

Operatoren

• + (Addition)
• – (Subtraktion)
• * (Multiplikation)
• / (Division)

Syntax

calc([wert] [operator] [wert])

So könnte eine Definition aussehen:

calc(2 + 2 + 1 * 15)

Vor und nach dem Operator sollte ein Leerzeichen stehen. Das Ergebnis in diesem Beispiel wäre 19.

Praktisches Beispiel

Nehmen wir an Du hast ein Layout mit zwei Spalten. Die linke enthält dynamischen Content, in der rechten wird eine Sidebar mit Werbung platziert. Die Sidebar soll immer eine feste Breite von 300 Pixel haben, die linke Spalte aber soll dynamisch sein und sich der Browserbreite anpassen. Mit der Eigenschaft calc() wäre das so lösbar:

.linke_spalte {
 width: calc(100% - 300px);
 float: left;
}
.rechte_spalte {
 width: 300px;
 float: right;
}

Beispiel anschauen

Die rechte Spalte erhält von mir in diesem Beispiel feste 300 Pixel, die linke aber 100% des Elternelementes minus die 300 Pixel, die die Sidebar in Anspruch nimmt. Beim skalieren des Browsers kann man hier sehen, dass die rechte Spalte statisch bleibt, die linke aber sich der Breite des Browsers anpasst.

Browserunterstützung

Alle gängigen Browser, außer der Internet Exporer < 8 unterstützen die CSS-Eigenschaft calc().