div grid tab not in content

Question

I use a php function to put my page content in the index.php, but when I use a grid (tab) in the content it goes out of the content borders.

I put a little bit of the code underneath, you can see the site here: (link deleted > problem solved)

Answer 1

You put your .clearfix in the beginning of the .content .

If you place it after the tabs, the border will display correctly.

Answer 2

Non floated elements only takes height of their non-floated child or content.

Examples

Situation 1: Non floated parent and non-floated child. The parent element will take full height of it's child.

div{
  border:1px solid;
}

<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>

---

Situation 2: Non floated parent and but floated child. Again the parent element is only taking height of not-floated child element(s) because the floating elements does not affect the size of the parent element.

div{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}

<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>

---

Situation 3: Floated parent and floated child. Now this situation is actually a solution of the 2nd Situation, but this situation/solution is not best practice, Especially when you want parent to be centered align of it's parent.

Now why this situation is working? because floated elements will expand to contain it's floated child elements.

div{
  border:1px solid;
  float:left;
}
.float{
  float:left;
  width:50%;
}

<div class="parent">
  <p  class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>

---

---

Now how we can solve 2nd situation without using 3rd situation. The answer is The clear CSS property.

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

MDN

Now How we can use clear?

The stone age solution, put an element at the bottom of parent element and give it clearfix. This is a good solution but every time you have to add an extra element. Worthless when you cannot edit your dynamic HTML.

div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}

<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  
  <div style="clear:both"></div>
</div>

---

Now you don't want to add an extra element then let css3 do this job for you, create and element at the bottom of parent with pseudo:after element then assign it a job to clear floated elements.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="parent clearfix">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
</div>

Sources

1. Clear CSS property
2. What is a Clearfix

Answer 3

Changes CSS use overflow: hidden; it recover box

.content {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 15px;
    margin-bottom: 20px;
    clear: both;
    overflow: hidden;
}

Answer 4

.content {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 15px;
    margin-bottom: 20px;
    clear: both;
    float: left;
}