Align Multiple Images Right

[PCHomepage]

I'm trying to remove the old legacy table tags from a site and need to be able to force images to the right margin and, in some cases, to have centered captions beneath each. In many cases the images are loaded dynamically and may vary in number and size so forcing a DIV to a particular width probably won't work. The page text needs to remain to the left and wrap around the images as needed.

Sometimes the images are all together as a column; other times they are spread throughout the page. Because the images are coming dynamically from a database and not all are adjacent, having an all-enclosing DIV isn't possible as page text will also end up inside it so whatever the solution is, it needs to be free-standing per-image. My original code for a single image was working before I tried to modify it but now it is forcing the images to the left with no wrapping so I could use some advice.

.PhotoBox {
	position: relative;
	float: right;
	width: 100%;
	margin: 0 0 2px 10px;
	color: #8E0400;
	padding: 0px;
	border: 1px solid black;
	/*text-align: center;*/
	font-size: 0.75em;
	line-height: 1em;
}

Without the width, they are indeed to the right but they are beside one another rather than above one another. Also, some have captions inside the same DIV which need to be centered below each image. (The border, by the way, is there only for diagnostic purposes.) Any ideas?

 

[PCHomepage]

Replacing width: 100%; with clear: both; seems to have done the trick! Still testing but at least it's a step in the right direction.