All geek questions in one place

Simple HTML rendering problem

I doubt the basics of HTML rendering. I have the following HTML / CSS.

http://jsfiddle.net/cgZ4C/2/

<style type="text/css"> .outer { background-color:#DADADA; width:400px; border:1px solid silver; margin:auto; min-height:50px; padding:10px; } .content { float:left; width:196px; min-height:20px; background-color:#BABABA; margin:2px; } </style> <div class="outer"> <div class="content"> </div> <div class="content"> </div> <div class="content"> </div> <div class="content"> </div> <div class="content"> </div> <div class="content"> </div> <div class="content"> </div> <div>

Why doesn't the outer div grow when inner content grows? Even I tried to add text inside div.content. But still, the .outer extension is not growing?

+4
source share
6 answers

You need to add an overflow property to your outer div and assign it the correct value, e.g.

 overflow:hidden

Find the one that best suits your needs here.

The following is a possible code change:

 .outer { background-color:#DADADA; width:400px; border:1px solid silver; margin:auto; min-height:50px; padding:10px; overflow:hidden; }
+5
source

CLEAN YOUR SWIMMING! Is always: -)

Add overflow:auto; as in this code: http://jsfiddle.net/cgZ4C/3/

Many CSS frameworks currently use the clearfix class . This has become the de facto standard. Twitter bootstrap also uses it. We just need to add the clearfix class to the outer div, and you will do the following :)

+1
source

It does not grow, because all your content inside the parent is floating. When an element moves, it is no longer taken into account by the parent when calculating its total size. As each element moves, as far as the parent is concerned, there is no content, so it does not change.

0
source

Your code looks like a table, so the display:table ( source ) element will behave like a table element.

http://jsfiddle.net/eWwtp/

 .outer { background-color:#DADADA; width:400px; border:1px solid silver; margin:auto; min-height:50px; padding:10px; display:table }

Another solution that avoids these problems:

But with overflow hidden , more problems can arise if elements outside this div are hidden or clipped (usually with a menu, etc.).

http://jsfiddle.net/4LqaK/

Add:

 <div class="clear"></div> .clear{clear:both}
0
source

Although Clearing floats are the right way, sometimes there is another way you can do this:

float your outer div too !!!

 .outer { float: left; }

That way, the outer one will respect pop-up children and expand, but you will also need to pop up the parent div of the outer element, and so on, until an ancestor div div is cleared, which is cleared / <body> .

All floats are like brothers, so they go along with each other much better than non-floating undisclosed divs.

:)

0
source

Add attribute overflow: hidden in .outer style.

0
source

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

More articles:


All Articles