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;
}

Insi

Answer 1

container{
    overflow: auto;
}

Insert the following at the end, before the enclosing the container

<div style="clear:both"></div>

The container will automatically expand to the the last clear:both

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.

Answer 3

It's 2016. A good way of doing this is using flex property.

.container {
  display: flex;
  flex-wrap: wrap;
}

Then the child element can get rid of the old magical float property.

Check out this JSFiddle to see the effect.

Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.

Answer 4

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;
}