CSS Calc

Source

CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought we'd have with CSS, however, was its static nature; i.e. there's really no logic, per se. The CSS calc routine bucks that trend, providing developers an ounce of programming ability within CSS.

The CSS

The calc routine is especially useful when calculating relative widths. Calculations can be additions, subtractions, multiplications, and divisions. Have a look:

/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);

WebKit and Opera currently require a browser prefix for calc(). Be sure to use whitespace around operators so that they aren't construed as positive and negative notations.