Percentage as the final output in LESS and Calc()

Asked Mar 30 '19 at 15:59

Active Mar 30 '19 at 15:59

Viewed 18 times

I have 25 divs side by side.

The first div needs to be 200px. The next 24 divs need to be divided equally in the remaining screen space available, so 100/24, which is 4.16%.

I need the css for the 24 equal divs. How do I calculate this using calc?

Here's the pseudocode of what I need, but LESS doesn't seem to recognize the outside %.

calc((100% - 200px) / 24)%

asked Mar 30 '19 at 15:59

Prabhu

no need for the outside % which is invalid ... `calc((100% - 200px)/4)` is enough – Temani Afif Mar 30 '19 at 16:06
I actually tried that but it doesn't work. Inspecting it shows that it evaluates to this: width: calc(-4.16666667%) – Prabhu Mar 30 '19 at 16:12
you need this: https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc – Temani Afif Mar 30 '19 at 16:17
That doesn't seem to answer my original question...it only talks about the negative percentage... – Prabhu Mar 30 '19 at 16:19
try it and see .. you need to use this `calc((100% - 200px)/4)` and avoid less to evaluate it (like in the duplicate) .. you said *that it evaluates to this: width: calc(-4.16666667%)* which means that you have a compilation issue, not calc() issue – Temani Afif Mar 30 '19 at 16:20
Where are you getting 4 from? Do you mean 24? – Prabhu Mar 30 '19 at 16:20
1

yes sorry I mean 24 ... your formula without the % at the end – Temani Afif Mar 30 '19 at 16:21
I tried it...the result is all divs squished together... – Prabhu Mar 30 '19 at 16:21
1

did your try what suggested in the duplicate `calc(~"(100% - 200px)/24")` ? – Temani Afif Mar 30 '19 at 16:22
Is there any reason you wouldn't use flex here? – asimovwasright Apr 01 '19 at 07:00
Well, in case you didn't find the answer you were hoping for, here's a fiddle with the flex solution: [flex 25 items](https://jsfiddle.net/asimovwasright/8xof6sL4/) – asimovwasright Apr 01 '19 at 07:19

0 Answers0