Wells-it.com - Web Hosting

Images in fluid layout

You are viewing this site as a guest. Join our community to get your questions answered and share knowledge. Active members may advertise and ask for a website critique.
Sponsor

They have: 178 posts

Joined: Feb 2005

Okay so I want to display a series of images on a line... not multiple lines.

Problem is I don't know how much space I will have. I will only be able to fit 2, maybe 3 on an 800x600 while I could fit more in 1600x1200...

How should I combat this issue so as to not overload an 800x600 user with the # of images yet not being "too empty" in the 1600x1200?

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Megan's picture
Administrator

She has: 10,288 posts

Joined: Jun 1999

Is this a photo gallery or is it something decorative? In a photo gallery I use lists and float the photos so they show as many as can fit on a line for each screen resolution. See here. If you wanted only one line you could use overflow:hidden to hide anything that falls outside of a containing div or your ul.

For something decorative you could use a background image.

Sponsor

They have: 178 posts

Joined: Feb 2005

Megan;217204 wrote: Is this a photo gallery or is it something decorative? In a photo gallery I use lists and float the photos so they show as many as can fit on a line for each screen resolution. See here. If you wanted only one line you could use overflow:hidden to hide anything that falls outside of a containing div or your ul.

For something decorative you could use a background image.

I'm having a mind block! What if not all the images are the same width?

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Sponsor

They have: 178 posts

Joined: Feb 2005

Megan;217204 wrote: Is this a photo gallery or is it something decorative? In a photo gallery I use lists and float the photos so they show as many as can fit on a line for each screen resolution. See here. If you wanted only one line you could use overflow:hidden to hide anything that falls outside of a containing div or your ul.

For something decorative you could use a background image.

I have done essentially what you have done, but the problem is that if it does not fit then there will be "extra" space on the right-hand side.

Is there some way I can center it? It's not like I will know the width the pictures will take up, so...

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

demonhale's picture

He has: 3,301 posts

Joined: May 2005

You could always use cut thumbnails then show the larger complete image when clicked. Megans suggestion of using overflow could help the page adjust to the images listed. If you use percentages for image containers, any image outside the range of the screen will be pushed below it. But you must explain what you specifically need to do with the images...