How do I Position These Photos Using CSS?

I’m using a plugin that pulls photos from my tumblr blog and displays them in the sidebar of my wordpress site. It has a section that allows the user to modify the CSS, and another section that allows you to add additional HTML if you need to.

I’m trying to change the way photos are being displayed in a wordpress widget I’m using. Right now, there are four photos with one photo below the next one in a line. I want the photos in rows of two so it’s basically a cube of photos instead of a long line. Here’s the CSS I have currently:

float:left; margin-right:12px; margin-bottom:8px; margin-top:8px;

What do I need to add to this to position the photos the way I want to?

Let me know if you need more information, I can supply quite a bit.

Since I’m getting this from a feed, the image will change multiple times a day, so I can’t specify a url or anything like that. I guess I just need to know what to add to the CSS code in my first link to get the images to be positioned like this:


We’d need to see what structure you are placing the image in but if the parent container is wide enough for only 2 photos (+ margins) then the floats will automatically wrap to the next line and your aim will be achieved.

This also assumes that all images (+ captions) have a fixed height and are all the same size otherwise they will snag on each other.

If that’s not the scenario then we’d need a little more info :slight_smile: