Question

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 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;

Answer 1

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/