limit number of images in a row?

Question

Hey all

i have a set of images that i want to show where they are saved into my database as linked, where each images has its thumbs, now i have used limit inquery to show a small number of images where the user needs to go next to show the other, my question is that how can i arrange those images where 4 images in a row and 3 columns

Answer 1

If the images all have the same width then make the container only wide enough for 4 images and float the images left

Otherwise loop through the images and use the modulus operator to test for which image in the row you are on. If you are on an image that should be the first in the row you can clear the floats on that image.

Answer 2

HTML:

<div id="image_container">
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 ...
</div>

CSS:

#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }

You may need to adjust the sizes; this is the general concept though.