Reply To: [Solved] Understanding and using CALC()

[paulob]

Where does the 3 come from in step 2 ?

It will be easier to visualise if for .third we say this instead:

.third {width:calc((100% / 3)  -  2 * 3.0675% / 3) }

That says divide into three and then distribute the 2 gaps over the three elements.

So that follows when you want two thirds you do the same but you only want one gap distributed (over what would have been three elements).

.twothirds{width:calc((100% / 3 * 2)  - 3.0675% / 3)}

Does that make sense?

There are other ways to do it but are longer:

.twothirds{width:calc((100% – (2 * 3.0675%)) / 3 * 2 + 3.0675%)}

I’m sure a someone better at maths can shorten the whole thing anyway :)