CSS3 box-sizing 50% width

css

Solution

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/

Problem

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?

Original source