adding padding or margin breaks float - html

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;
}

Answer 3

This is because you set width for content area, and content area is inside the padding, border and margin. So when you specify padding, total width would be 60% + 15px.
You can get around it by using nested cell:
/* remove padding from grid-X classes */
.cell {
padding: 0 15px;
}
<div class="grid-6">
<div class="cell">
<p>content for grid6</p>
</div>
</div>
(I've forked your jsfiddle here: https://jsfiddle.net/9ss09b15/)
You can also add box-sizing:border-box; to your grid-X classes, which will make it include padding and border in width, but it still won't include margin.

Answer 4

If padding is a constant, you can use calc() function to assign a calcutated width. Check below example.
.grid-4 {
float: left;
width: calc(40% - 30px);
/* 30px = 15px(padding-right) + 15px(padding-left) */
background: red;
padding: 0 15px;
}
.grid-6 {
float: left;
width: calc(60% - 30px);
background: blue;
padding: 0 15px;
}
.clearfix {
clear: both;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>
Updated fiddle: https://jsfiddle.net/t29q1gcL/11/

Answer 5

Use box-sizing:border-box; style. Because The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
In width calculation formula is width = margin-left -padding-left + width + margin-right -padding-right + border
In your css style total width morethan 100% You have use 60% , 40% and padding 30px. so, it's break.

Answer 6

Use CSS3 box-sizing Property
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
Instead of calculating width by including padding and border, the box-sizing property in combination with the border-box value uses the width property as the actual rendered width.
Example:
.sidebar {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
Any padding or border that’s applied will not be added to the rendered width. Instead, it will automatically subtract from the space that’s available in the content area. This results in code that is far more readable. Here’s an image that helps illustrate how box-sizing: border-box calculates widths.
Reference
https://css-tricks.com/box-sizing/
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts
.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;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>