Text wrapped around a picture -- picture longer than text

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.

On 2008-04-27, Jonathan Sachs <js070717 (AT) sbcglobal (DOT) net> wrote:

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

Align="left" is deprecated. Use float: left in the styles instead (which
is essentially equivalent for an IMG).

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

You can't set align=left in a stylesheet (that's why it's deprecated) so
I'm not sure I follow you here.

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 _think_ you're basically asking why doesn't the div grow in height to
fit the floated image in?

They don't because often you don't want a gap between paragraphs. You
want consistent spacing between them but for the text in the next
paragraph to continue to flow around the float.

See also http://netweaver.com.au/floatHouse.

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.

If you're asking what I think you are, you can set overflow: hidden on
the div to make it contain the float (or do something weird and
non-standard for IE, which I think dorayme explains how to do in the
link above).

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 helps 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/

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 Help You:
http://diveintomark.org/archives/200..._wont_help_you

On 2008-04-27, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
[...]

The <div> markup only means a block. When the end tag </div> is
encountered, a line break is generated

Loosely speaking I suppose this is OK, but </div>'s effect on text is
more like a paragraph separator than a line break.

[...]

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.

The CSS spec says that a table cell is a "block formatting context".
This means that the flow inside the table cell is not affected by any
floats originating outside it, and also that no floats originating
inside a table cell affect the flow of anything outside it.

Scripsit Ben C:

On 2008-04-27, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
[...]
The <div> markup only means a block. When the end tag </div> is
encountered, a line break is generated

Loosely speaking I suppose this is OK, but </div>'s effect on text is
more like a paragraph separator than a line break.

No, it's strictly so that <div> specifies a block, and this means line
breaks before and after and no other default effect on rendering. The
HTML 4.01 specification says this poorly but clearly enough:

"The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV)
but impose no other presentational idioms on the content."
http://www.w3.org/TR/REC-html40/stru....html#edef-DIV

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.

The CSS spec says that a table cell is a "block formatting context".
This means that the flow inside the table cell is not affected by any
floats originating outside it, and also that no floats originating
inside a table cell affect the flow of anything outside it.

That's undoubtedly the idea, but I was unable to find it stated
explicitly.

Besides, the effect of HTML markup is distinct from CSS and cannot be
formally governed by CSS specifications. Regarding the effect of
align="..." and <br ...>, HTML specifications are the only authoritative
source (and pretty lame and obscure in this issue).

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

On 2008-04-27, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

Scripsit Ben C:

On 2008-04-27, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
[...]
The <div> markup only means a block. When the end tag </div> is
encountered, a line break is generated

Loosely speaking I suppose this is OK, but </div>'s effect on text is
more like a paragraph separator than a line break.

No, it's strictly so that <div> specifies a block, and this means line
breaks before and after and no other default effect on rendering. The
HTML 4.01 specification says this poorly but clearly enough:

"The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV)
but impose no other presentational idioms on the content."
http://www.w3.org/TR/REC-html40/stru....html#edef-DIV

The reason I say it's more like a paragraph separator than a line-break
is because of the bidi algorithm.

A line-break (or a BR) doesn't pop embedding levels for example but
starting a new DIV does.

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.

The CSS spec says that a table cell is a "block formatting context".
This means that the flow inside the table cell is not affected by any
floats originating outside it, and also that no floats originating
inside a table cell affect the flow of anything outside it.

That's undoubtedly the idea, but I was unable to find it stated
explicitly.

It's all in there, but I have put it more clearly

On 4/26/2008 10:09 PM, Jonathan Sachs wrote:

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.

Are you trying to get something similar to the graphic at my
<http://www.rossde.com/pgp_encrypt.html#combine>? While the title is
part of the graphic, I could have used markup to make it true text.

--
David Ross
<http://www.rossde.com/>

Have you been using Netscape and now feel abandoned by AOL?
Then use SeaMonkey. Go to <http://www.seamonkey-project.org/>.

In article <l62814dppuvrrv9drj9lcm8ie52vpof0j8 (AT) 4ax (DOT) com>,
Jonathan Sachs <js070717 (AT) sbcglobal (DOT) net> wrote:

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:

....

In my case, since the wrapped text includes a headline,
....

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.

Well, just to bypass other interesting issues raised in the thread for a
moment, it sounds like you find it easy to do with a table but something
mysterious is gripping you (an html/css conscience?) to imply this is
not really so easy and there must be easier. You can see plainly the
magic of tables at work yet... <g>

Never mind, will this layout meet your needs:

<http://netweaver.com.au/alt/headingPicSpiel.html>

--
dorayme