tags:

views:

291

answers:

2

Hi, 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"&gt;
<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

+3  A: 
Gaby
Thanks, is there a way to specify a minimum height of the DIV?
John
sure, look at the updated answer..
Gaby
+2  A: 

Hi John,

Just remove your 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"&gt; 
<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

Michael Ulmann