Home/ Questions/Q 661261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:14:52+00:00

I am trying to make my DIV’s height expand to it’s child elements. I

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0