All geek questions in one place

DIV needs to expand its height to its children

I am trying to increase the size of a DIV to its children. I read several other posts, but could not answer these questions for me.

Here is an example of HTML that presents my problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <style type="text/css"> .PropertyPanelMain { font-size: 8pt; color: #000; border: 2px solid #ccc; width: 100px; height: 100px; } </style> </head> <body> <div class="PropertyPanelMain"> <div style="">This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. </div> <div style="">More content</div> <div style="clear:both;"></div> </div> </body> </html>

Can someone show me how to make an external DIV expand to its contents (two child DIVs)?

Thanks, John

+4
source share
2 answers

If you want it to expand, do not click on the height ...

remove height:100px; from css rule.

It seems that you want to float inside the div. If this is the case, you can (after removing the height) either do it with a clearing div, or remove the div divider and set the overflow to auto in the PropertyPanelMain rule.

 .PropertyPanelMain { font-size: 8pt; color: #000; border: 2px solid #ccc; width: 100px; overflow:auto; }

[update comment]

To use the minimum height, you can use the min-height css property, but since it is not supported by all browsers, we do the trick using the !important css directive

 .PropertyPanelMain { font-size: 8pt; color: #000; border: 2px solid #ccc; width: 100px; overflow:auto; min-height:100px; height:auto!important; height:100px; }

IE will ignore the rule height:auto , because it does not comply with the !important directive, but by mistake It will expand to include content.

+13
source

Just remove the fixed height from the style:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <style type="text/css"> .PropertyPanelMain { font-size: 8pt; color: #000; border: 2px solid #ccc; width: 100px; } </style> </head> <body> <div class="PropertyPanelMain"> <div style="">This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. </div> <div style="">More content</div> <div style="clear:both;"></div> </div> </body> </html>

Michael

+2
source

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

More articles:


All Articles