Fork me on GitHub

<!DOCTYPEhtml.net>
HTML5/CSS3 Demos + Experiments

calc() function

You can use the CSS calc() function to subtract e.g. the padding or border-width of an element from its actual width.

This ist the outer div with a total width of 100%. All inner divs have 8px padding both left and right as well as an 2px border around. All inner divs also have float: left.

width: calc(
25%
- 8px*2
- 2px*2
- 4px*2
)
width: calc(
60%
- 8px*2 /* (padding left/right) */
- 2px*2 /* (border left/right) */
- 4px*2 /* (margin left/right) */
)
width: calc(
15%
- 8px*2
- 2px*2
- 4px*2
)

Set outer width: 100%, 90%, 75%, 65%, 530px