Flow 2-row elements (images with titles)

[Andrew Daviel]

I'd like to know how I can create a flow of 2-row elements
that is resized by the browser window.

I.e., I want to bind elements together (in a div, or table, or something)
and then treat the combined element as a single character that will flow
with automatic line breaks.

I have a photo album page that has basically a single stream
of <a href="photo.jpg" target="photo"><img src="thumb.jpg" title="xx"></a>
This works nicely; I can place the photo window on the monitor and
resize the index window beside it, or underneath, and scroll it only
in the vertical direction. Automatic line break puts however many thumbnails
on the line as will fit and no more.
Now I want to put a (possibly multi-line) title underneath each image,
but keep the automatic line break. If I put this in individual tables,
I get forced line breaks. If I put them in table elements, I don't
get any line breaks at all, just one long line.
I don't want to use a fixed table width, as that is making assumptions
about the window size, and I'd rather do something simple
in HTML or CSS than a complicated script.

Is it even possible ?

(if you have an answer, email is good...but I'll check the list..)

--
Andrew Daviel

[Jukka K. Korpela]

Andrew Daviel <an****@daviel.org> wrote:

Now I want to put a (possibly multi-line) title underneath each
image, but keep the automatic line break.

There are several alternatives, such as the HTML-only approach of
making the image and a title a two-cell table and using <table
align="left"> and the basically CSS approach of wrapping the image and
the title inside a div element and setting float: left for that
element.

But it's a long story, with many pros and cons for each method... see
http://www.cs.tut.fi/~jkorpela/www/captions.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jukka K. Korpela <jk******@cs.tut.fi> wrote:

Andrew Daviel <an****@daviel.org> wrote:

Now I want to put a (possibly multi-line) title underneath each
image, but keep the automatic line break.

There are several alternatives, such as the HTML-only approach of
making the image and a title a two-cell table and using <table
align="left"> and the basically CSS approach of wrapping the image and
the title inside a div element and setting float: left for that
element.

Thanks!

<table align="left"> did not work for me - it creates one long line.
But <table style="{float:left}"> does what I want in Mozilla and IE 6
and falls back to a readable newline-every-image page in Netscape 4.
Since I'm regenerating the index with a script every time I add new photos,
I have made a text file of
captions to read in. Next trick, actually writing sensible captions
for the photos ...

If anyone wants a copy of the Perl script, which also extracts
"taken" dates from Kodak CX camera JPEGs, please ask (email).
I used the 2-cell approach and made the captions as well as the thumbnails
links to the full-size photos. I am pretty sure this will get the image
indexed properly in Google ...

--
Andrew Daviel