floating images flush bottom

• From: David Perrell <davidp@earthlink.net>
• Date: Wed, 30 Oct 1996 18:19:54 -0800
• To: "Style" <www-style@w3.org>
• Message-Id: <199610310225.SAA19609@greece.it.earthlink.net>

In HTML, an align right or left image will be rendered on the line
following the <IMG ...> tag if the tag is not at the beginning of the
line. So if a horizontally-aligned image is the last element in a
paragraph it will be rendered below all text in the paragraph.

This may make sense in HTML, but floating elements in CSS1 should not
be treated the same way. Since floated elements are outside the normal
flow yet constrained as far as possible within the parent, floated
elements that would otherwise extend below the final text of a parent
element should be drawn up into the parent element and bottom-aligned
with the parent's content so far as is possible without causing the
floated element to extend above the parent's content.

Example markup:

<STYLE>
IMG { float: left }
.
.
<P>This is a paragraph with a nested image blah blah ... 
blah.<IMG SRC="xxxx" ALIGN=left></P>

Rendered without CSS1:

This is a paragraph with a nested image 
blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
*-----*
|     |
|     |
*-----*

Rendered with CSS1:

This is a paragraph with a nested image 
*-----* blah blah blah blah blah blah
|     | blah blah blah blah blah blah
|     | blah blah blah blah blah blah
*-----* blah blah blah blah blah blah


David Perrell

Received on Wednesday, 30 October 1996 21:48:45 UTC