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 Boxes. Inside the Box I have a <UL> List. The List items <li> are also Floated left.

As you can see in the image, the List items do not make the Box Div that they are inside of Expand. I have tried several thing without much luck and was hoping someone with more experience could help? I cannot set a fixed height on the Box Div as the number of icons is always different and it needs to expand to fix them.

enter image description here

Live demo: http://jsfiddle.net/jasondavis/u5HXu/

<div class="module-box">
    <div class="module-box-title">
        <h4><i class="icon-cogs"></i>Admin Settings</h4>
        <div class="tools">
            <a href="#" class="collapse">-</a>
        </div>
    </div>
    <div class="module-box-body" style="display: block;">


        <ul>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
        </ul>


    </div>
</div>

CSS

/* Modules homepage */
.module-box {
    margin: 0px 0px 25px 25px;
    padding: 0px;
    float: left;
    width: 464px;
}

.module-box-title {
    margin-bottom: 0px;
    padding: 8px 10px 2px 10px;
    border-bottom: 1px solid #eee;
    color: #fff !important;
    background-color: #333;
    height: 51px;
    line-height: 45px;
    border-radius: 3px 3px 0 0;
}

.module-box-title h4 {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin-bottom: 7px;
}

.module-box-title .tools {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-top: 6px;
    float: right;
}
.module-box-title .tools a {
    font-size: 31px;
    color: #fff;
    text-decoration: none;
    line-height: 29px;
}

.module-box-body {
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 10px;
    clear: both;
}

.module-box-body a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11px;
    color: #888;
    text-decoration: none;
}

.module-box-body li {
    float: left;
    margin: 0 12px 0 0;
    list-style: none;
}

Jared · Accepted Answer · 2013-02-27T21:47:57.487

12

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/

edited Feb 27 '13 at 21:47

answered Feb 27 '13 at 21:41

Jared

12,406
1
35
39

2

**Note:** Method #2 is more cross-browser compatible (older versions), but also less desirable since it adds HTML that does not have any semantic usefulness whatsoever. – animuson Feb 27 '13 at 21:49
1

Method #1 known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ http://nicolasgallagher.com/micro-clearfix-hack/ – Jared Feb 27 '13 at 22:34

score 7 · Answer 2 · answered Feb 27 '13 at 21:42

7

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

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

answered Feb 27 '13 at 21:42

Terry

63,248
15
96
118

1

@wrongstars It's hard to explain it in layman's terms, but basically using `overflow: hidden` establishes a new block flow context, which forces the parent container to "recognize" and sequester the inner floated element entirely. http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Terry Aug 12 '14 at 12:18
@Terry, dude, this is exactly what i was looking for, it's ridiculous how simple this answer is to solve the issue at hand. Are you a magician ? – Dan Mar 03 '15 at 22:29

score 2 · Answer 3 · answered Feb 27 '13 at 21:44

2

Change your .module-box-body li to

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

Updated fiddle.

answered Feb 27 '13 at 21:44

hjpotter92

78,589
36
144
183

score 1 · Answer 4 · answered Feb 27 '13 at 21:41

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. :/

answered Feb 27 '13 at 21:41

Madbreaks

19,094
7
58
72

CSS Float does not stretch Div Height

4 Answers4

Linked