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

[rob123]

I havent used Codepen before and wouldnt know where to start :)

BUT:

After viewing the screencast I think this is correct:

.half{width:calc((100% - (1 * 3.06748466257669%)) / 2);}
.third{width:calc((100% - (2 * 3.06748466257669%)) / 3);}
.quarter{width:calc((100% - (3 * 3.06748466257669%)) / 4);}
.fifth{width:calc((100% - (4 * 3.06748466257669%)) / 5);}
.sixth{width:calc((100% - (5 * 3.06748466257669%)) / 6);}

Im finding the logic is my problem – understanding what is actualy required and what’s happening.

I am by no means a math expert but looking at the equations above 3 things go on:

Step 1
margin amount multiplied by margin width e.g. (1 * 3.06748466257669%) = 3.06748466257669%

Step 2
100% width minus the result of margin amount multiplied by margin width e.g. (100% – (1 * 3.06748466257669%) = 96.93251533742331%

Step 3
The result of Step 1 + 2 divided by the amount of elements to be displayed e.g. ((100% – (1 * 3.06748466257669%)) / 2) = 96.93251533742331% / 2 = 48.46625766871166%

I have tried following suit, with, for example “twothird” & “threequarter”, but my result seems to be clumsy and long winded:

.twothird{width:calc((100% - (2 * 3.06748466257669%)) / 3 * 2 + 3.06748466257669%);}

.onequarter{width:calc((100% - (3 * 3.06748466257669%)) / 4);}
.twoquarter{width:calc((100% - (3 * 3.06748466257669%)) / 4 * 2 + 3.06748466257669%);}
.threequarter{width:calc((100% - (3 * 3.06748466257669%)) / 4 * 3 + 2 * 3.06748466257669%);}