Question

I have a div container with a child div inside:

<div id=mainWrapper>
    <div id=child>
    </div>
<div>

 #mainwrapper height:100%, width:900px
 #child height:100%, width:50% overflow:visible float:right

The child div contains a list of elements.

How to I resize the mainWrapper when the overflow from the child is larger than the height of the mainWrapper?

I’ve tried a bunch of css and also some script: $(‘#mainWrapper’).css(‘height’,$(‘#child’).height());

nothing is working.

Answer 1

Set overflow: auto on mainwrapper:

#mainwrapper {
    width:900px
    overflow: auto;  
}

Its the hasLayout thing when using floats.