Intelligente CSS-Layouts mit calc()

Dynamische große Layouts mit CSS3 erstellen und trotzdem Elemente mit festen Größen platzieren ist mit der rechnenden CSS Funktion calc() kein Problem mehr.

Beim Erstellen von CSS-Layouts fängt man meistens damit an, Höhen und Breiten festzulegen sowie Abstände zwischen den Elementen zu definieren. Bisher war es nicht möglich zu sagen, dass man 50% der Breite haben möchte, abzüglich eines festen Wertes von z.b. 100px als Platzhalter für andere Elemente mit fester Breite.


Das kann nun mit der CSS Eigenschaft gelöst werden. Neu ist, dass die Calc Funktion jetzt auch Werte zwischen relativen und absoluten Werten ebenso wie Werte zwischen verschiedenen Einheiten berechnet. Ausser auf Höhen und Breiten von Elementen ist auch die Berechnung der Positionierung von Hintergründen und Bildgrößen möglich. Als Operator können +-*/ für Addition, Subtraktion, Multiplikation und Division verwendet werden.


Hier 2 Beispiele:
 .el1 { width: calc(50% - 150px); }
.el2 { width: calc(5em + 2px); }