How to get a css DIV tag to auto-adjust its height in Firefox

The (Firefox) bug here is that divs seem to not auto adjust thier height to the content that is inside them

To solve this, you use the 'overflow:hidden;' property in the div tag

This seems to do the trick without even having to specify a 'height' property for the div

I have no idea what overflow means, but it seems to solve the problem for ie6, ie7 and FF

 

This is NOT a Firefox bug. Firefox is performing correctly. Parent elements are NEVER to expand to contain floated elements. IE does this but it is a well known IE bug.

 

Is an Internet Explorer bug, not Firefox

 

Agreed its to do with IE wrapping floating content when it shouldn't if remember correctly. Firefox has the correct behavior.

 

Add the clear div in the parent div, this makes the parent div to auto adjust its height.

<div style="clear: both;">&nbsp;</div>

 

See Enclosing Float Elements for an explanation of this and other methods of containing your float elements.

cheers,

gary