My job involves HTML-izing a lot of reports. Most of these start off as Word docs, and many contain images.

The images usually have a note below, like this:

[image here]
Figure 1: picture of a mouse

I want the page to look tidy, so I try to nest smaller images within the document and let the body text wrap around them. This is easy to do with a div, and I'm using this CSS:

.imgleft { float:left; padding:0px 10px 5px 0px }
(there's also one to float the image right).

This works just fine, until I have a note for the image. Since the note text has no way of knowing how wide the image is, I have to use <br> tags to keep the text from pushing the div to the right and creating blank space. The only word-around is to assign a width to the div, but since all the images are a different width, that gets clunky.

I don't know of any way to put a div around the image and not let the text push it wider. Does anyone else?