Question

As you can see from the code i’m using clear:both to allow me to place #three under #one #two but this seems to be stopping me from adding margin-top to #three is there a fix for this?

<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>

#one {
    float:left;
}

#two {
    float:right;
}

.clearfix {
    clear:both;
}

#three {
    margin-top: 20px;
}

Answer 1

Wrap #one and #two in a container with overflow:hidden;, and you won’t even need the clearfix.

Demo

---

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​