Display a series of images with text headers like a paragraph, Treating a DIV like a word in a paragraph Options

[PapaGeek]

I have a page where I am displaying a series of 5 large image on a single, or multiple, lines. I would like to find a way of displaying a text header above each image.

http://www.papageek.com/Tile1/index.htm

My current coding is:

<p><img height=276px width=414px src=Basic.jpg>
<img height=276px width=414px src=River1.jpg>
<img height=276px width=414px src=River2.jpg>
<img height=276px width=414px src=InnCath.jpg>
<img height=276px width=414px src=Riv1Cath.jpg></p>


Basically, I want to change each img lines into something like:

<p>
<div class=both>Basic<br><img height=276px width=414px src=Basic.jpg></div>
<div class=both>R 1<br><img height=276px width=414px src=River1.jpg></div>
<div class=both>R 2<br><img height=276px width=414px src=River2.jpg></div>
<div class=both>Inns<br><img height=276px width=414px src=InnCath.jpg></div>
<div class=both>RInn<br><img height=276px width=414px src=Riv1Cath.jpg></div>
</p>

Then, if the image doesn’t fit on the line, both the image and the header will move to the start of the next line.

http://www.papageek.com/Tile1/index.htm


You can look at the example of the 5 images being treated as words in a paragraph, and like words, as the page width gets smaller and another word does not fit on the line, the word (image) is just moved to the start of the next line. I want to create a DIV that acts like a single word in a paragraph.

[pandy]

Floats. I.e. each image and its caption must be contained in for example a DIV and then you float the DIVs left. There's a little more to it, but basically.

There is a good old writeup about that. Lets see if I can find it. Yes, I could! :-D
http://realworldstyle.com/thumb_float.html

[Brian Chandler]

Floats. I.e. each image and its caption must be contained in for example a DIV and then you float the DIVs left. There's a little more to it, but basically.

There is a good old writeup about that. Lets see if I can find it. Yes, I could! :-D
http://realworldstyle.com/thumb_float.html

I recommend you read up on flex display. I would avoid floats everywhere it is possible: they are an ill-thought-out mess. I note that Pandy's reference seems to be dated 2002.

[pandy]

I said it was old, didn't I? That doesn't make it bad. It's an easy to follow writeup. Your dislike for floats and almost everything that has to do with CSS doesn't mean it is bad.