Re: Float overflowing behavior

We have three cases. The article based case:

>This is the start of some article in the
>magazine.
>In this article, we have a picture, perhaps of
>+-------------+ the author, or the subject of
>|             | the article, or even an ad.
>|   picture   |
>|             | This is the second paragraph,
>|             | which is also intended to flow
>+-------------+ around the same picture in the
>article.  This would be a case in which the
>current float behavior is useful.

For this case we would see some HTML like:

<h1 class="title">Article title</h1>
<p>Some text<img>Some text</p>
<p>Soe text</p>

We would want the <img> to float left and
the <p> elements to flow around it.



And the short definition (list) kind case:

This is some introductory text.
In this collection, we have a picture of
+-------------+ a product with a small
|             | introductory text that
|   picture   | links to a page containing
|             | its fulldescription.
|             |
+-------------+

After both the text and the picture the
+-------------+ next prodcut, or object
|             | is presented. As seen in
|   picture   | this example The previous
|             | picture does not obscure
|             | this picture. If the text
+-------------+ would be large enough --
that is the height of the C.B. of the
paragraph equals or is more than the
heright of the picture -- there wouldn't
be a problem.


For this case we would see dome HTML like:

<div class="product">
   <h2 class="producttitle">Product name</h2>
   <p>Some text<img class="productimage">Some text</p>
</div>
<div class="product">
   <h2 class="producttitle">Product name</h2>
   <p>Some text<img class="productimage">Some text</p>
</div>


Where we want the <img> to float left the <p> to flow
around the <img> and the next <div> to come below thr
<img>.

-- or --

<h2 class="producttitle">Product name</h2>
<p>Some text<img class="productimage">Some text</p>

<h2 class="producttitle">Product name</h2>
<p>Some text<img class="productimage">Some text</p>


Where we want the <img> to float left the <p> to flow
around the <img> but any following <p> to come below thr
<img>. Or in other words keep the C.B. of the <img>
inside of the C.B. of the <p> by when needed enlarging
the C.B. of its <p>.





And the long definition (list) kind case:

This is some introductory text.
In this collection, we have a picture
+-------------+ perhaps of a product.
|             | It contains a full text
|   picture   | describing it.
|             |
|             | To be able to do this
+-------------+ more then 1 paraghrap
is needed to describe it. In this case
we don't want this behaviour.

But since not all of the items described
+-------------+ need a lot of explanation
|             | some of the items only
|   picture   | have 1 paraghraph. And we
|             | don't want these pictures
|             | to obscure the next.
+-------------+

For this kind of material we need a mixture
+-------------+ of them both. But we still
|             | want to describe it
|   picture   | semantically. we need some
|             | construction to do this.
|             |
+-------------+

The third case is the hardest since it
would break semantics a bit if we would
code the picture with 1 paraghraph
differently from the ones containing more
than 1 paragraph.

The HTML structure for the third case
could be:

<h1 class="pagetitle">Product catalog</h1>
<div class="product">
   <h2 class="producttitle">Product name</h2>
   <p><img class="productimage">Some text</p>
   <p>Some other text</p>
</div>
<div class="product">
   <h2 class="producttitle">Product name</h2>
   <p><img class="productimage">Some text</p>
</div>

Here we would want the <img> to float left and
have the <p> elemnts flow around the <img> but
have the next <div> to come below the floating
<img> element.



The first and second could be done by an extra
attribute on the <img>. The third only *as I
see currently* by having an extra attribute on
the <div> element (which also suites case 1
and 2 (fragment 2 needs it on the <p>).)

Christian

Received on Wednesday, 14 August 2002 16:21:46 UTC