INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Align Multiple Images Right

Align Multiple Images Right

(OP)
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.

CODE

.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?

RE: Align Multiple Images Right

(OP)
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.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close