0

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;
}
6
  • 1
    Are you using any preprocessor?
    – zrooda
    Mar 16, 2016 at 0:25
  • Ah, yes I'm using LESS and using webpack to load it into my JS
    – Jimmy Gong
    Mar 16, 2016 at 0:26
  • 2
    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, 2016 at 0:28
  • 3
    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, 2016 at 0:50
  • I like that - what's industry standard?
    – Jimmy Gong
    Mar 16, 2016 at 3:30

1 Answer 1

-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;
}
1
  • 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, 2016 at 3:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.