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.

Solution 1

Set overflow: auto on mainwrapper:

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

Its the hasLayout thing when using floats.

Solution 2

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/

Comments

[A H]

I'm having trouble with this fix. i set the class of mainwrapper to clearfix. then I add .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } to my css file. and its not working btw my mainWrapper has 2 children divs. one is float right the other is float left. only the float right child has overflow:visible and is causing the problems

[A H]

but i don't want overflow:auto. I want the children to overflow:visible and I want the mainwrapper to re-size its height to fit the overflow

[Damien Overeem]

Thats actually what this does.. you wont get scrollbars unless the child exceeds 900px width. Need to remove the height of it though, otherwise you also get scrollbars. Did you actually tru this option?

[totallyNotLizards]

OK, so you've read up a bit on clearfixes then? Unfortunately not all of them work under all circumstances. General rule of thumb is you want to clear both after your floated content but before closing the parent - which is why I usually find that a <br style='clear:both;'/> or similar works best. So try adding that after your second child but before closing the parent and see if that helps.