Home › Forums › CSS › [Solved] Understanding and using CALC() › Reply To: [Solved] Understanding and using CALC()
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%);}