CSS calc() to subtract px from % is interpreting px value as a %

Question

I have two divs in a container with a 1px border. I want each div to take up exactly half of the container by width, so I'm trying use CSS3's calc function to subtract a predetermined pixel value (2px, one border line on each side of the divs) from the overall width (50%). However, for reasons I can't figure out, it's subtracting a percent value from the percent value instead of a pixel for this operation: calc(50% - 2px);

Here is the relevant styling for the divs in the container:

.contained {
  border-width: 1px;
  width: calc(50% - 2px);
  display: inline-block;
}

Ah, yes I'm using LESS and using webpack to load it into my JS — Jimmy Gong, Mar 16 '16 at 00:26
Then you have to use it escaped, because of some LESS parsing, like so: `~"calc(50% - 2px)"`, otherwise LESS will not render the syntax correctly. Your syntax is basically correct, just not in LESS. — zrooda, Mar 16 '16 at 00:28
This isn't relative to calc() but its not even necessary in this case. You could use `box-sizing: border-box` instead. — CKH4, Mar 16 '16 at 00:50
Possible duplicate of http://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc — Harry, Mar 16 '16 at 05:33

score -1 · Accepted Answer · answered Mar 16 '16 at 04:27

-1

As suggested by CKH4 use box-sizing: border-box instead. box-sizing is better supported than calc and it's neater and more flexible too.

.contained {
    border-width: 1px;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
}

answered Mar 16 '16 at 04:27

3dgoo

15,716
6
46
58

I'm not sure why someone has down voted. Whoever did, I would love to hear what is wrong with this answer. – 3dgoo Mar 21 '16 at 03:36

CSS calc() to subtract px from % is interpreting px value as a %

1 Answers1