Geek asks and answers

CSS Float Doesn't Stretch Div Height

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

In the image you can see that I have a Div Div that floats on the left, since there are many of these Boxes. There is a list inside the box <UL>. List items are <li>also located to the left.

As you can see in the image, the list items do not make Box Div that they are inside Expand. I tried several things without much luck and hoped that someone with more experience could help? I can’t set a fixed height in the Box Div, as the number of icons is always different, and they need to be expanded in order 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;
}
+5
4

clearfix clearing.

# 1 clearfix

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


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

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

# 2

.clear {
    clear: both;
}

HTML- .

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

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

+12

overflow: hidden (..module-box-body);) .

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

+5

.module-box-body li

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

fiddle.

+2

overflow:auto , ( ).

jsfiddle, .:/

+1
source

More articles:


All Articles