css floating problem: how to get a left float to wrap around a right float

have a box that displays images wrapped in a div from a database 4 across x 4 high. The image are floating to the left so they self wrap. But I want to add an object (a div) to the top right and have the images wrap around (so only 3 in the first row, then 4 every row after). I've tried using float right, absolute, relative and nothing gets it to display correctly.

Any tips?

EDIT (CODE):

I add the div first then the images, what happens is that the div pushes the image that would otherwise be in the 4th spot down out of the way, doesn't wrap it.

This is my g开发者_如何学Pythonoal:

| Image(in div)  Image(in div)   Image(in div)    Div   |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |

Images:

position:relative;
float:left;
height:200px;
width:200px;

Div:

position:relative;
float:right;
height:200px;
width:200px;

You can simply place the div in front of all the images, then float it to the right:

#right {
    width: 200px;
    float: right;
}

with this HTML:

<div id="right">
    Some text, content. </div>

<img src="http://placehold.it/200x200" alt="" />
<img src="http://placehold.it/200x200" alt="" />
[...]

Usually there isn't a need to float the img elements here, since they are inline elements already. See this working live here: http://jsfiddle.net/wQfAc/

tough to say without looking at your html and css, but as a general tip have you tried rendering the div you are floating right first in your HTML before all the images?