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

have box displays images wrapped in div database 4 across x 4 high. image floating left self wrap. want add object (a div) top right , have images wrap around (so 3 in first row, 4 every row after). i've tried using float right, absolute, relative , nothing gets display correctly.

any tips?

edit (code):

i add div first images, happens div pushes image otherwise in 4th spot down out of way, doesn't wrap it.

this goal:

| 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 place div in front of images, float right:

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

with html:

<div id="right">     text, content. </div>  <img src="http://placehold.it/200x200" alt="" /> <img src="http://placehold.it/200x200" alt="" /> [...] 

usually there isn't need float img elements here, since inline elements already. see working live here: http://jsfiddle.net/wqfac/