title: overflow:hidden Parent div not expanding to floated children
body: <p>I am making a megadropdown menu and have this structure</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="drop_div4"&gt;  
            &lt;div class="child"&gt;  &lt;----floated child
            &lt;div class="child"&gt;  &lt;----floated child
            &lt;div class="child"&gt;  &lt;----floated child
  </code></pre>
  
  <p>the problem is that depending on access rights i will have to hide any of the child divs and so i want the <strong>drop_div4</strong> to be able expand automatically but currently if i remove the width on it then all child divs are shown below one another.</p>
  
  <p>I have tried adding <code>overflow:hidden,float:left</code> to the <strong>drop_div4</strong> div but it doesnt work</p>
  
  <p>Adding <code>min-width</code> and hoping it would grow also doesnt help.</p>
  
  <p>Adding <code>&lt;div style="clear:both"&gt;</code> as the last div also doesnt help</p>
  
  <p>I have set up a <a href="http://jsfiddle.net/pankajsingh5k/H6Tgu/" rel="nofollow">jsfiddle</a> for the same with the width removed on the parent div and all the child div are showing below one another.</p>
  
  <p>To see how it looks when all the child div are visible please uncomment the width:550px in the <strong>.drop_div4</strong> class</p>
  
  <p>Kindly help as i have no clue as to why this is happening.</p>