adding padding or margin breaks float

Question

I tried to create CSS grid like bootstrap col. I want to add a padding of 15px from the left and the right. But when I add the attribute it breaks the float (makes it to not stand side by side).

Here is the example: https://jsfiddle.net/t29q1gcL/

Why didn't it work?

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}

Answer 1

add this to your css, reference link http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
   box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

check with the working fiddle https://jsfiddle.net/d8mrdz7x/

Answer 2

Add: "box-sizing: border-box;"

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
  box-sizing:border-box;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
  box-sizing:border-box;
}

.clearfix{
  clear: both;
}