Sun, 27 Apr 2008 00:09:17 -0500 from Jonathan Sachs <js070717
@sbcglobal.net>:
> I'm trying to compose a list of items, each of which consists of text
> that wraps around a picture at the left margin.
>
> 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>

The above will give you the headline to the right of the picture.
Another choice is
<h2...
<p><img class="classname"...
text text</p>
which will give you the headline, then the picture and text below it.
This form does not require the enclosing <div>.

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

That's
.classname { float: left }
not align=left. I strongly suggest you validate your CSS and HTML.

> 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?

Why *should* text flow in that way? The <img> is floating, not the
<div>. The CSS doesn't understand the logic in your head, only the
logic in your HTML. :-)

Question: Is that next paragraph logically under the same headline?
If so, and if the headline is aligned next to the picture not on top
of it, then logically I think the next paragraph *should* continue
next to the picture.

What you need to do -- and I agree it's not obvious the first time --
is to style the *next* paragraph to clear the float. I have a class
"newsec" for when I start a new section. Its css is
.newsec { clear:both }
and in your example above I would use it like this:
<div>
<img src="xxxx.jpg" align="left" width=nn height=nn>
<h2>yyy yy yyyyyyyyy</h2>
<p>zzz zzzzz zz zzzzz...</p>
</div>
<h2 class="newsec">Next Headline</h2>
Or else this, if the headline isn't supposed to be inset next to the
picture:
<h2...
<p><img class="classname"...
text text</p>
<p class="newsec">blah blah...

> 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.

<<shudder>>

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't You:
http://diveintomark.org/archives/200..._wont__you