Firefox 4: CSS3 calc()
I have been asking for this for five years. FINALLY. To the guys working on Firefox who made this possible: I love each and every one of you.
This article describes the CSS3
calc()value. This feature hasn’t landed yet in any Firefox tree but work to implement it is underway.Firefox will support the CSS
calc()value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes ofdivs, the values of margins, the widths of borders, and so forth.Here is an example of a layout which would be tricky to setup without the
calc()function:/* * Two divs aligned, split up by a 1em margin */ #a { width:75%; margin-right: 1em; } #b { width: -moz-calc(25% - 1em); }This example makes sure an input text field won’t overlap its parent:
input { padding:2px; border:1px solid black; display:block; width: -moz-calc(100% - 2 * 3px); }One particularly powerful feature of the
calc()function that you can combine different units in the same computation:














