Scripsit Jonathan Sachs:

> I'm trying to compose a list of items, each of which consists of text
> that wraps around a picture at the left margin.

As usual, a URL would illustrate the situation essentially.

> <p><img src="xxxx.jpg" align="left" width=nn height=nn>zzz zzzzz zz
> zzzzz...</p>

You can do that, though using CSS instead of align attributes is
preferred, as Ben C noted. It's really not a big issue, though.

> In my case, since the wrapped text includes a headline, I assume I am
> supposed to do this:
>
> <div>
> <img src="xxxx.jpg" align="left" width=nn height=nn>
> <h2>yyy yy yyyyyyyyy</h2>
> <p>zzz zzzzz zz zzzzz...</p>
> </div>

You can do that, though the <div> markup in effect just causes a line
break before the image (and even the line break might already be caused
by other markup). Using <div> markup is good for logical grouping,
though, and s in styling, too.

> This does not work (in either case) when the picture is longer than
> the text.

I guess you mean the picture is taller than the box generated for the
text. (The height of that box depends in many factors, so it's often
variable, and should be.)

> The next paragraph of text is spaced from the end of the
> preceding paragraph, even though the picture extends beyond that
> point.

Right, since you have placed an image on the left so that subsequent
content flows on the right of it

> What does HTML think the <div> is supposed to do, if
> text does not flow around it as a unit?

The <div> markup only means a block. When the end tag </div> is
encountered, a line break is generated, but the flow of content on the
right or left of a floated element is continued.

> I have found that I can get the result I want by putting the entire
> list of items in a table, with each item in a one-cell row.

Tables have their own rendering rules, including the fact that flow does
not continue from one cell to another. I think there's nothing in the
specifications that says this explicitly, but this is clearly the intent
and it's how browsers work.

> It seems
> to me that there must be an easier way, though, so I wonder if I'm
> missing something.

To stop the flow, you can use <br clear="all"> in HTML or clear: both in
CSS (yes indeed, the property name is the same as the attribute name,
but the value used to stop flow on either side is different!). Using
CSS, you apply the declaration to the element _after_ the last element
to have flowing content.

You could use

<div class="item">
<img src="xxxx.jpg" alt="???" width=nn height=nn>
<h2>yyy yy yyyyyyyyy</h2>
<p>zzz zzzzz zz zzzzz...</p>
</div>
<p class="more">More text...

with the following CSS code:

..item img { float: left; }
..more { clear: both; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/