Using Box-sizing border-box CSS

Box-sizing in CSS tells the browser how to size the width and height and what to set them too. By default the width and height properties are set to content-box in CSS. Setting the box-sizing to border-box tells the browser to show the box with the set width and height and place both the padding and border inside of the box.
This is supported by all modern browsers and IE 8.0 and on.

Border-box is one of four values you can set for box-sizing. The remaining three are:

content-box: (default) Height & width includes only the content, not border, padding, or margins.
initial: Sets to default value
inherit: Inherits the value from any parent element.

<style> 
.contain {
    width: 500px;
    border: 5px solid red;
}

.box {
    box-sizing: border-box;
    width: 25%;
    border: 10px solid blue;
    float: left;
}
</style>

<div class="contain">
  <div class="box">Left</div>
  <div class="box">Middle left</div>
  <div class="box">Middle right</div>
  <div class="box">Right</div>
  <div style="clear:both;"></div>
</div>