Question

I’m trying to create two divs side by side. I tried to put float: left in .holder-left and float: right in .holder-right but they are floating outside the parent holder and content divs.

How can I solve it?

CSS

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
}

div.holder > div.holder-left {
    float: left;
}

div.holder > div.holder-right {
    float: right;
}

HTML

<div class="holder">
    <div class="holder-left">
        aufgftf ftftfy
    </div>
    <div class="holder-right">
        afytf fttyfttyty
    </div>
</div>

Answer 1

A quick and dirty solution is modify div.holder by adding the overfow property. This will allow the outer div to properly wrap the inner, floated divs. I don’t remember why, but there is some quirky-ness with this solution, so see the “clearfix” solution below.

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
    overflow: hidden;
}

---

Although, you should properly implement the “clearfix” solution. (Here you don’t need to use the overflow property as shown above.) Here is the CSS for the clearfix solution I use:

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .group{ zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

Then change your HTML for the floated divs as shown below. All you need to do is add the group class to the div that contains the floated elements. This will ensure the floated divs stay completely inside the outer one.

<div class="holder group">
    <div class="holder-left">aufgftf ftftfy</div>
    <div class="holder-right">afytf fttyfttyty</div>
</div>

Here is the source for this clearfix solution.