I'm working with page template in WordPress (don't matter). I'll try insert a picture to express the point of my promlem.

![](https://i.stack.imgur.com/Bas88.png)

LEFT-DIV is a child of CONTENT-DIV and has float:left. They both have the same background color.
CONTENT-DIV can have another child NOTE-DIV in any place. It can be right from LEFT-DIV, it can be below. So I don't know its width for sure. Also, there can be a few of NOTE-DIVs inside CONTENT-DIV. The problem is that NOTE-DIV has another background color and cutting (overlaping) the LEFT-DIV.

Is that possible to avoid this?

My code looks like this:

```
<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"></div>
    <p>...Content...</p>
    <div class="some-note" style="background:aqua;">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
</div>

```

Here is real example:
[<http://jsbin.com/iqerug/4/edit#preview>](https://jsbin.com/iqerug/4/edit#preview)