Clear only one of multiple floated items

I have a layout where there are two items floated right and another item floated left. In between I want to h开发者_JAVA技巧ave a div that clears only one the second of the right floated item.

E.g. I have a layout with a div floated to the right of the page, then a floated image on the left, and another floated image on the right. I want to clear only the image that is floated on the right but not the whole div.

Is there a way to clear only one of the floated items on the right. See http://www.davidapfel.com/testimonials.html, I want to put the image higher up and then put a div underneath the floated image but next to the bar on the right.

Is there any way to do this, or any other easy way of accomplishing this, perhaps without using float?

Thanks very much

Something like this?

JS Fiddle

HTML

<img height=200 src='/img/top-bg.png' />
<div id='container'>
    <img height=100 src='/img/top-bg.png' /><br />
    my text
</div>

CSS

img{
    float:left;
    width:30px;
    margin-right:10px;
}
#container {
    float:left;
}
#container br{
    clear:left;
}

It doesn't involve nested divs, just one to keep the br from clearing the second image.

Wrap the image that's floated to the right in a div, and float the div right not the image, then you can add clear:right; to your div class and padded as needed.

You can also float your h2 tag, or make it display:inline-block and that will let you move your right side image up a little more right now the h2 is going across the page pushing everything down.