css - border-box with percents and margins -

how use border box percentage , 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 div(.half) take 50% of screen - 5px margin around div posable every time try makes wider 50% , puts second box on next row avoid % based margins if posable.

margins never computed part of width, using box-sizing: border-box;

so try replacing margin border: 5px solid transparent

---

or, if can't override borders, depending on effect want achieve try :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 need more space */     display: inline-block; } 

example: http://jsbin.com/imiqak/1/edit

---

or may use nested elements, 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