All geek questions in one place

Div mesh tab not in content

I use the php function to place the content of the page in index.php, but when I use the grid (tab) in the content, it goes beyond the boundaries of the content.

I put the code below a bit, you can see it here: (link removed> problem resolved)

+5
source share
5 answers

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

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

+4
source

Non-floated elements only accept the height of their non-floating child or content.

Examples

Situation 1: Non-swimming parent and non-swimming child. The parent will take the entire height of its 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: A non-floating parent, but a floating child. Again, the parent takes only the height of the non-floating child (s), since floating elements do not affect the size of the parent.

 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: Floating parent and floating child. Now this situation is actually the solution of the 2nd Situation, but this situation / solution is not the best practice, especially if you want the parent object to be centered, aligned with its parent.

Now, why does this situation work? because floating elements will expand to contain floating 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 can we solve the second situation without using the third situation. Answer: Clear CSS property.

An explicit CSS property indicates whether an element can be next to floating elements that precede it or should be moved down (cleared) below them. A clear property applies to both floating and non-floating elements.

MDN

Now How can we use clear ?

Decision on the stone age, place the element at the bottom of the parent element and give it clearfix . This is a good solution, but every time you need to add an additional element. It is useless if you cannot edit 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 do not want to add an additional element, and then css3 do this task for you, create and create an element at the bottom of the parent with the pseudo:after element, then assign it a task to clear the floating 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

+5
source

Changes the use of CSS overflow: hidden; he restores the window

 .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; }
+2
source 
 .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; }
+2
source

everything happens because of the float:left that you used in .tab3 . you use display:inline-block instead of float:left or use float:left for content

not working (like 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: 4px 4px 4px 4px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); padding: 15px; margin-bottom: 20px; clear: both; } .tab3 { width: calc(100%/ 3); float: left; } 
 <div class="content"> <div class="clearfix"></div> <div class="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. <div class="space"></div> <a href="?page=habbo_burgerschap"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Burgerschap</div> <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Archievements</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Regels</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Games</div> <div class="blockimage" style="background-image:url(img/content/habbo_games.png)"></div> </div> </div> </a> </div>

solution 1. integrated unit

 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: 4px 4px 4px 4px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); padding: 15px; margin-bottom: 20px; clear: both; } .tab3 { width: calc(100%/ 3); display:inline-block; } 
 <div class="content"> <div class="clearfix"></div> <div class="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. <div class="space"></div> <a href="?page=habbo_burgerschap"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Burgerschap</div> <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Archievements</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Regels</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Games</div> <div class="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: 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; } .tab3 { width: calc(100%/ 3); float: left; } 
 <div class="content"> <div class="clearfix"></div> <div class="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. <div class="space"></div> <a href="?page=habbo_burgerschap"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Burgerschap</div> <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Archievements</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Regels</div> <div class="blockimage" style="background-image:url(img/bg.png)"></div> </div> </div> </a> <a href="#"> <div class="tab3"> <div class="block"> <div class="blocktitle">Habbo Games</div> <div class="blockimage" style="background-image:url(img/content/habbo_games.png)"></div> </div> </div> </a> </div>

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

0
source

Source: https://habr.com/ru/post/1268469/

More articles:


All Articles