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/

Compel

Margin is not part of the border-box sizing. Thus width:33.333%(3) + side margins > 100%, so the last element is pushed to the next row – Watermelon

@ZachSaucier really, I swear it worked for me before, is there a way to apply such behaviour to margins as well? – Compel

You'll have to subtract the % margins from the width. In your case that would make the width 31.3333% – Watermelon

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>    

Jeanne

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>

Penman

Answer 3

I have experienced a similar problem although I didn't use any margin. When I didn't determine a height for a div in grid, onclick animation on a button effected the div size and move things around even if I tried box-sizing:border-box.Setting a height for the div containing the button worked. Button re-size animation works but the surrounding div doesn't expand. This was the solution in my case. So the problem might not be margins!

Sartre

Answer 4

I encountered a similar problem today.

I added the following CSS code at the top of the component CSS file to reset it, and the column elements won't go to a new line anymore:

* {
    box-sizing:border-box;
}

Tarmac

omg, the format... the css code is <star> { box-sizing:border-box;} – Tarmac