CODEWITHSUNDEEP
htmlcsscss-float
GerryofTrivia
GerryofTrivia

Reputation: 430

adding padding or margin breaks float

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

Upvotes: 3

Views: 2414

Answers (6)

Uladzimir
Uladzimir

Reputation: 31

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

Upvotes: 2

Mike Phils
Mike Phils

Reputation: 3505

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.

enter image description here

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>

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

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.

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

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/

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8407

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/

Upvotes: 5

Andrey Stolbovsky
Andrey Stolbovsky

Reputation: 303

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.

Upvotes: 0

Related Questions