How to resize a div container to fit overflow from a child div

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

Use a clearfix after the close of #child. Floated divs need cleared to pull their parent div to the same height.

 <div id=mainWrapper>
     <div id=child>
     </div>
     <div style='clear:both;'><!--clear--></div> 
  <div>

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

Reference: http://www.webtoolkit.info/css-clearfix.html

What methods of ‘clearfix’ can I use?

http://css-tricks.com/snippets/css/clear-fix/

Answer 2

Set overflow: auto on mainwrapper:

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

Its the hasLayout thing when using floats.