Question

When I use the following code, the last div overlaps the floated content:

<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>

The common fix is to do this:

<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>

However, in my case, I cannot add in an extra element. Is there another workaround for this?

Edit:
clear:both; fixed the overlapping issue, but there’s a margin on the last div, so it’s something like this:

<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>

And now the new problem is that the margin isn’t showing up.

Answer 1

You could simply clear the floats…

<div style="background:red;clear: both;">test</div>