It seems that box-sizing: border-box is not working

Question

I've never came across this issue, but in a nutshell I apply border box as my box-sizing to all the elements:

*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

I than have a responsive column layout, in this case 3 columns per row

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

All spans nicely across 3 columns until I add margin to .property div, now usually because of border-box this would simply add margin between the columns and leave them 3 in a row, but now for some reason 3rd column is pushed to a new row, I honestly don't understand why, am I missing something?

Here is live example on jsFiddle: http://jsfiddle.net/NmrZZ/

Answer 1

Margin is not part of the box-model (whatever box-sizing you use), so it will always be in addition to the width + padding + border you've declared.

The image below (from the CSS Tricks article on this topic) illustrates the difference between the standard box-model and box-sizing: border-box:

The best advice I can give is to avoid margins for your grid entirely, and to keep it separate from your presentation. This means more markup, but will save you headaches and make things much easier to maintain. Check out this fork of your example. The amended CSS:

.span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

And the new markup will be:

<div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>    

Answer 2

It's a float clear problem. Instead of float you can use inline-block as float is outdated. Most people now use display:inline-block as there is no need to write clear for separate line.

Refer:

*, *:before, *:after {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

body {
    background: grey;
}
}

.row {
	clear: both;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clear {
    zoom:1;
}

.column {
	display: inline-block;
	}

.span-4-12 {
	width: 30%; 
}

.property {
    background: white;
    margin-left: 2%;
}

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>Some text 1</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 2</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 3</p>
   </div>
</div>