Inner left-floating div's do not expand the container div vertically

Question

I have a container div with the following attributes:

#cat_container{ margin:0; padding:5px; border:1px solid red; min-height:200px; } 

Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.

Left floating div's:

.cat_wrap{ border: 1px solid #000; width:100px; min-height:120px; margin:0 10px 5px 0; padding:0; float:left; } 

If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?

Answer 1

you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.

#cat_container{    margin:0;    padding:5px;    border:1px solid red;    min-height:200px;    overflow: auto;    height: auto !important; } 

Answer 2

This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:

.mydiv:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } * html .mydiv             { zoom: 1; } /* IE6 */ *:first-child+html .mydiv { zoom: 1; } /* IE7 */ 

The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.

Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.