Image positioning

Maximum images on a line

[elliotgoodrich]

I am trying to layout images in rows. I want the ability for the number of images per row decrease (say if the screen resolution is small), but I do not want it to go above the default layout. (If you are wondering why it is because then the images do not display in a nice rectangle.

If for example I have 6 images, and want them to display in 2 rows of 3, but want the flexibility for it to condense into 3 rows of 2, or even 6 rows of 1.

If I just float them all to the left, then if the resolution is high, then I get one row of 4, and one row of 2. Ugly.

It probably could be done with some clearing, but I'm stuck.

Thanks for any advice

[londrum]

best thing to do would be to mark them up in a list.
something like this

<ul id="gallery">
<li><img src="image1.jpg" width="100" height="100" alt="" /></li>
<li><img src="image2.jpg" width="100" height="100" alt="" /></li>
<li><img src="image3.jpg" width="100" height="100" alt="" /></li>
<li><img src="image4.jpg" width="100" height="100" alt="" /></li>
</ul>

all you've got to do is float the <li>'s to the left, like you've been doing with your images already, but put a maximum width on the <ul>. that way it won't grow beyond a certain width.

[elliotgoodrich]

I would preferably like a bit more flexibility.

Damn, I've just done it (I have been working on it for a while)

Just add clear:left to all the images in the left hand column and it works.

Sorry for that, but thanks for the quick reply!

UPDATE: However, now if the resolution gets too big, IE wants to stick the images in the bottom row up at the top.

FIXED: I've added a <br /> after each row, IE won't then stick up an image from a lower row on to the end of a higher one.

[londrum]

the good thing about doing it the list way, is that you can include some text underneath each image if you want to, really easy... like a caption or something
the full code would be something like this:

<ul id="gallery">
<li><img src="image1.jpg" width="100" height="100" alt="" /> Caption for image1</li>
<li><img src="image2.jpg" width="100" height="100" alt="" /> Caption for image2</li>
<li><img src="image3.jpg" width="100" height="100" alt="" /> Caption for image3</li>
<li><img src="image4.jpg" width="100" height="100" alt="" /> Caption for image4</li>
</ul>

and the CSS...

#gallery { list-style-type:none; max-width:600px; }
#gallery li { float:left; margin:0 10px 0 0; font-size:75%; text-align:center; }
#gallery img { display:block; }