Read more

CSS: Combining different length units with calc()

Dominik Schöler
March 08, 2013Software engineer at makandra GmbH

calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:

.foo {
  width: calc(100% - (20px * 2));
}
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

When using Sass, you need to interpolate Sass expressions:

$margin: 20px * 2

.foo
  width: calc(100% - #{$margin})

Supported Show archive.org snapshot by all modern browsers and IE9+.

Posted by Dominik Schöler to makandra dev (2013-03-08 14:22)