Posted by Andy Dingley on 06/18/07 11:19

On 18 Jun, 11:52, "Marnok.com" <wizardha...@pottermarnok.com> wrote:

> I have a page with multiple small images, when I resize the browser window
> the images shuffle around so they are all displayed on screen no matter the
> size of the browser window.

Searching back a few months for "Ansel Adams" might find you a good
example of this.


> My problem is, that I would like a small text beneath each image, but I
> can't figure out how to achieve the same effect.

You stick each unit of "image and captions" into a <div>. Mess with
the markup inside this as much as you like.

You give each <div> a matching class attribute of <div class="image-
box" >

You put all these <div>s into a container <div>

Use CSS to set the width of the image <div>s to be small, with them
floated left and without clearing;

Set the width of the container <div> to be "a reasonable width", based
on the browser window. _Don't_ set this to be a fixed width in pixels,
or you're back where you started

You've now got a linear list of little boxes which will do their best
to sit in neat rows within a big box. Unlike a <table>, they don't
have any notion of "being in rows", they just behave as one list that
tries to best fill the available container.

This isn't a popular way of doing image thumbnail galleries, but it
ought to be. It usually works far better than <table> markup,
particularly for narrow windows.

http://brainjar.com/csss/positioning/ should be enough of a CSS
tutorial for you to work out the rest.

[Back to original message]