Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Div Grid Tab Not In Content

Post a Comment
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 undernea

Solution 1:

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

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

Solution 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;
}
<divclass="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%;
}
<divclass="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><pclass=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><pclass=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%;
}
<divclass="parent"><pclass=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><pclass=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><pclass=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%;
}
<divclass="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><pclass=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><pclass=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><divstyle="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;
}
<divclass="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><pclass=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><pclass=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

Solution 3:

Changes CSS use overflow: hidden; it recover box

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

Solution 4: 

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

Solution 5:

it all happens because of the float:left you used on the .tab3 . you either use display:inline-block instead of float:left or you use float:left on the content

not working ( as it is on your site ) 

body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

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

.tab3 {
  width: calc(100%/ 3);
  float: left;
}
<divclass="content"><divclass="clearfix"></div><divclass="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <divclass="space"></div><ahref="?page=habbo_burgerschap"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Burgerschap</div><divclass="blockimage"style="background-image:url(img/content/habbo_burgerschap.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Archievements</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Regels</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Games</div><divclass="blockimage"style="background-image:url(img/content/habbo_games.png)"></div></div></div></a></div>

solution 1. inline-block

body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

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

.tab3 {
  width: calc(100%/ 3);
  display:inline-block;
}
<divclass="content"><divclass="clearfix"></div><divclass="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <divclass="space"></div><ahref="?page=habbo_burgerschap"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Burgerschap</div><divclass="blockimage"style="background-image:url(img/content/habbo_burgerschap.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Archievements</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Regels</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Games</div><divclass="blockimage"style="background-image:url(img/content/habbo_games.png)"></div></div></div></a></div>

solution2 . float:left on content

body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

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

.tab3 {
  width: calc(100%/ 3);
  float: left;
}
<divclass="content"><divclass="clearfix"></div><divclass="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <divclass="space"></div><ahref="?page=habbo_burgerschap"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Burgerschap</div><divclass="blockimage"style="background-image:url(img/content/habbo_burgerschap.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Archievements</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Regels</div><divclass="blockimage"style="background-image:url(img/bg.png)"></div></div></div></a><ahref="#"><divclass="tab3"><divclass="block"><divclass="blocktitle">Habbo Games</div><divclass="blockimage"style="background-image:url(img/content/habbo_games.png)"></div></div></div></a></div>

let me know if one of these 2 solutions worked for you

Post a Comment for "Div Grid Tab Not In Content"