Nested calc operations

css expression css-calc
David picture David · Dec 22, 2013 · Viewed 12.9k times · Source

Hopefully this is quite simple. I want to use the CSS calc operation to perform two calculations:

I want to set my width to the equivalent of

(100% / 7) - 2

However if I try to perform more than one operation in a CSS calc operation, it fails:

width: calc((100% / 7) - 2);

How can I perform multiple calc operations in one CSS statement?

Answer

David picture David · Dec 22, 2013

Apparently you have to assign px or % to all numbers that are not being multiplied or divided.

width: calc((100% / 7) - 2px);

Well I feel dumb now. Haha.

Related questions

Conditionally add css class in polymer

I have an element inside a polymer component and want to add a css class conditionally. <div class="bottom {{completed: item.completed}}"> if item.isCompleted is true, then add the .completed class. However, I've got the following error: …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More