CSS3 box-sizing 50% width

Question

Unless I completely do not understand the box-sizing property... why aren't those two DIVs next to each other?

http://jsfiddle.net/MK7Fs/

With box-sizing: border-box; shouldn't the padding, margin, and border "cut in" to the 50% width and ultimately end up with 100% width and with enough room to fit both DIVs?

Answer 1

Margin is not added in when using box-sizing : border-box. If you remove the left/right margins your boxes line-up on the same line.

I also noticed your <div> elements have white-space between the first one's closing tag and the second's one opening tag. When using display : inline-block this will add space between the elements and they won't line up on the same line.

Demo: http://jsfiddle.net/MK7Fs/1/

box-sizing Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Some reading on the space between display : inline-block elements: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

As Jasper said, margin is not added when using box-sizing: border-box. This day and age, however, we've got a new tool in our toolbox: calc.

You can give the boxes width: calc( 50% - 40px ); (assuming you've got a total of 40px of margin).

Demo: https://jsfiddle.net/htwj/yzh7zg25/