separate captions for multiple images

[scotto]

Using the following code, I can center two adjacent images, and include a single caption.CSSdiv.center { margin: auto; text-align: center;}HTML<div class="center"> <img src="foo.png" /> <img src="bar.png" /> <br /> <b>Figure 1</b>: My caption for foo-bar</div>How can I make separate captions, and limit their extent to stay within the width of their repsective image?In the past is did this via a table with the pictures in one row and the captions in the following row. Additionally, by setting the width of the columns to the width of the pictures, caption text would wrap to stay within its column.ScottO

[scotto]

Reading some of the other threads, I learned about combining classes. Didn't realize you could do that.Made the following classes of div:CSS codediv.right { float: right; text-align: center;}div.left { float: left; text-align: center;}div.half { width: 50%; text-align: center;}div.w260px { width: 260px;}What I wanted to do was center 2 images on the page, and give each one its own caption. And, I didn't want the captions to stick out beyond the width of the respective images.Below I create a div that is the left half of the page. Then I nest a right floating div. The w260px class sets a width corresponding to my particular image size. This places the first image up against the center line of the page on the left side.Then the same thing on the right side, butting the second image against the center line of the page, on the right side.The "left half" and "right half" parent div's also float, so they effectively split the page in half.HTML code:<div class="left half"> <div class="right w260px"> <img src="foo.png" /> <br /> <b>Figure 1</b>: All foo. </div></div><div class="right half"> <div class="left w260px"> <img src="bar.png" /> <br /> <b>Figure 2</b>: All bar. </div></div>