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