Question

I have a page with 4 <div>‘s that have float: left applied to them inside of a container element. The container has background: #ffffff applied to it, but it is not working as I would expect in IE (8, specifically). It works fine in Chrome and FireFox.

I know that if I remove my slider from the container, everything displays as I would expect it. So it has something to do with that, I’m just not sure what it is.

Here is how it should look:

Here is how it is displaying in IE:

CSS:

/* Container */
.main-content {
    margin-bottom: 15px;

    background: #ffffff;
    border: 1px solid #e1e1e1;
}

/* Columns (Wrecked Vehicles, Welcome, Inv Search) */
.col {
    float: left;
    width: 289px;
    padding: 10px;
    margin: 5px;
}

/* Slider */
.slider {
    float: left;
    padding: 10px;
    margin: 5px;
}

HTML:

<div class="main-content">
    <div class="col n1">
        ...
    </div>

    <div class="slider">
        ...
    </div>

    <div class="col n2">
        ...
    </div>

    <div class="col n3">
        ...
    </div>

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

Answer 1

Try adding overflow:hidden to the .main_content. The reason the backgorund isn’t showing is because, due to all the children floating, the container has zero “real” height.