CSS Float does not stretch Div Height

Question

I have had this problem for a long time when working with HTML/CSS and Floats.

In the image you can see I have a Box Div that is Floated left as there is many of these B

Answer 1

Try applying overflow:auto to the container, the one whose height you want to resize based on the height of its contents (the floated items).

I'd add a jsfiddle link but it's not been working at all for me recently. :/

Answer 2

You need to clear your floats using a clearfix or clearing element.

Method #1 clearfix

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Then you add the class on the containing element

 <div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

Method #2 Clearing Element

.clear {
    clear: both;
}

Then you add the following HTML after your floated elements.

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

Answer 3

You can use the overflow: hidden trick on the parent container (..module-box-body) ;) fixes everything.

http://jsfiddle.net/teddyrised/ct6gr/

Answer 4

Change your .module-box-body li to

.module-box-body li {
    display: inline-block;
    margin: 0 12px 0;
    list-style: none;
}

Updated fiddle.