Nun der erste richtige Blogeintrag. Hier zeige ich, wie ihr mit CSS3 und einem kompatiblen Browser rechnen könnt. Nützlich ist dies z.B. bei Responsive Layouts. Auch auf dieser Website rechnet CSS mit.

Nachteil ist eben, nur die modernsten Browser unterstützen diese Funktion. Hier mal eine Liste, welche Browser kompatibel sind. Die Liste →
Und wie auch bei den runden Ecken, wollen die Unterschiedlichen Browser Engines eine eigene Syntax.

Nun aber genug, der Theorie, so sieht so eine Calc funktion aus.

width: calc(25% + 100px);

So sieht es Standardmäßig aus. Hier mal als Beispeil, eine Weite, width. Das ganze würde dann eine Weite von 25% haben und diese wird um 100px erweitert.
Mal ein Beispiel:
Der Bildschirm stellt 1000px in der Weite da. Ohne die Calc-Funktion wäre unser Inhalt 250px weit. So wäre as beispielsweise auch, wenn calc() nicht unterstützt wird. Wenn jetzt aber den richtigen Browser haben, ist der Inhalt 350px weit. Eigentlich ganz einfach. Es werden alle Grundrechenarten hierbei unterstützt.

Nun noch zum Thema, jeder kocht sein eigenes Süppchen. Hier die Funktion mit den unterschiedlichen Engines und natürlich mit der Basisfunktion:

width: -moz-calc(25% + 100px);
width: -webkit-calc(25% + 100px);
width: -o-calc(25% + 100px);
width: calc(25% + 100px);