border-box with percents and margins - border-box

Question

how do you use border box with percentage and margins?
example follows.
<style>
.half{
width: 50%;
float: left;
background: red;
margin: 5px;
box-sizing: border-box;
box-shadow: 0px 0px 3px black;
}
</style>
<div class="half">half</div>
<div class="half">half</div>
i want the div(.half) to take up 50% of the screen - a 5px margin all around the div is this posable every time i try it makes it wider than 50% and puts the second box on the next row i would like to avoid % based margins if posable.

Answer 1

margins are never computed as part of the width, even using box-sizing: border-box;
So try replacing margin with border: 5px solid transparent
Or, if you can't override borders, depending on the effect you want to achieve try with :after/:before pseudoelements, e.g.
.half {
width: 50%;
float: left;
background: red;
box-sizing: border-box;
box-shadow: 0px 0px 3px black;
}
.half:after, .half:before {
content: "";
width: 5px; /* or more if you need more space */
display: inline-block;
}
Example: http://jsbin.com/imiqak/1/edit
Or you may use some nested elements, like so:
.half {
width: 50%;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
}
.half p {
background: red;
box-shadow: 0px 0px 3px black;
}
Example: http://jsbin.com/imiqak/3/edit

Answer 2

margin are considered as outside the box (it's spaces around your box, not in the box). Margins size are not counted as part of the container width.
Indeed, when you type box-sizing: border-box;, you means the size of the box includes the border size, and if you look at this image below, you'll see that the margin are after the border, so it's ignored.

Answer 3

Try this:
CSS:
<style type="text/css">
.half{
width: 49%;
float: left;
background: red;
box-sizing: border-box;
}
.half:last-child{
margin-left: 1%;
}
</style>
HTML:
<div class="half">half</div>
<div class="half">half</div>