Question

I have a layout where there are two items floated right and another item floated left. In between I want to have 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

Answer 1

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.