Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

need DIV to expand its height to its children

Tags:

css

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

like image 355
John Livermore Avatar asked Mar 11 '10 22:03

John Livermore


1 Answers

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..

like image 157
Gabriele Petrioli Avatar answered Sep 24 '22 23:09

Gabriele Petrioli