Question

I have a parent div and 2 sub div as follow:

<div class="parent">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​

How to set the “parent” css to adapt to the largest height of inner div? In this case: 200px

PS: Neither height=100% nor height=auto works.

Thanks.

Answer 1

You can also “overflow:hidden” on the parent element, although you may encounter problems if you want things to break out of that div (e.g. negative margins, box-shadow, etc).

<div class="parent" style="overflow: hidden;">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​