Text wrapped around a picture -- picture longer than text

Giganews Newsgroups
Subject: Text wrapped around a picture -- picture longer than text
Posted by:  Jonathan Sachs (js0707…@sbcglobal.net)
Date: Sun, 27 Apr 2008

I'm trying to compose a list of items, each of which consists of text
that wraps around a picture at the left margin.  The examples I have
seen tell me to do it like this:

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

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>

(In my actual code I am referring to a class in the stylesheet instead
of using "align=left.")

This does not work (in either case) when the picture is longer than
the text.  The next paragraph of text is spaced from the end of the
preceding paragraph, even though the picture extends beyond that
point.  This makes sense in the first case (image inside a paragraph),
but it puzzles me in the second case (headline, image and paragraph
inside a <div>).  What does HTML think the <div> is supposed to do, if
text does not flow around it as a unit?

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.  It seems
to me that there must be an easier way, though, so I wonder if I'm
missing something.

Replies