Menu
I am trying to make my DIV's height expand to it's child elements. I have read some other posts, but have been unable to make the answer for those issues work for me.
Here is a sample HTML the represents 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 the outer DIV expand to its contents (the two child DIV's)?
Thanks, John
355
If you want it to expand then do not force a height on it...
remove the height:100px; from the css rule.
It seems like you want to float the inside divs. If that is the case you can (after removing the height) either do it with the clearing div, or remove the clearing div and set the overflow to auto on the PropertyPanelMain rule..
.PropertyPanelMain
{
font-size: 8pt;
color: #000;
border: 2px solid #ccc;
width: 100px;
overflow:auto;
}
[update to comment]
To use a minimum height you can use the min-height css property, but since it is not supported by all browsers we do a 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 height:auto rule because it does not respect the !important directive, but by de-fault it will expand to include content..
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
