W3C home > Mailing lists > Public > www-style@w3.org > August 2002

Re: Float overflowing behavior

From: Bill Daly <billdalynj@yahoo.com>
Date: Wed, 14 Aug 2002 07:37:11 -0700 (PDT)
Message-ID: <20020814143711.69253.qmail@web13006.mail.yahoo.com>
To: www-style@w3.org


--- Jan Roland Eriksson <jrexon@newsguy.com> wrote:
> And yet the real solution is so fantastically
> simple?
> 
>   <http://css.nu/exp/layer-ex3b.html>
>   <http://css.nu/exp/layer-ex3b.html>
>   <http://css.nu/exp/layer-ex3d.html>

I don't see that as a solution, so much as a hack. 
The empty div which you add in those examples has no
relevance to the structure of the document, and does
not belong.  It is being used purely for
presentational purposes.  While I have seen this in
use, and have used it myself in some cases, I don't
see it as the proper way for this effect to be
accomplished.

Now, while I don't agree with the previous mailing
about changing the default behavior of floats, I am in
agreement with the original message which started this
thread.  What is needed is some CSS property which can
be applied to a floated element which will allow its
container element to take the size of the floated
element into account and adjust its size accordingly.

Take, for example, the following code snippet
representing an online product catalog:

<div class="product">
    <img class="productimage" src="product1.jpg">
    <p>This is Product Description 1</p>
</div>

<div class="product">
    <img class="productimage" src="product2.jpg">
    <p>This is Product Description 2</p>
</div>

.productimage {
    float: left;
}

Now, in the case of a product catalog, the behavior
one would be looking for would be for each product's
picture to be next to its product description.  Given
the current implementation, a "productimage" whose
height is larger than that of its product description
text would overflow into the div of the next product,
causing confusion to someone who may be viewing the
page as to which pictures belong with which
descriptions.

Yes, you can achieve the desired effect with the
method of the empty div which you proposed earlier,
but is that extraneous markup truly the proper way to
go when it could be solved with a CSS property?

Imagine, if you will, someone new to web design.  What
would be more intuitive for them to do?  Add an empty
div, or use a defined CSS property like the proposed
float-overflow which says exactly whose name implies
the exact desired effect?

In my opinion, the float-overflow property proposed in
the message beginning this thread would be the best
solution, so long as the current default behavior of
floats is maintained when it is not specified.

Bill Daly

__________________________________________________
Do You Yahoo!?
HotJobs - Search Thousands of New Jobs
http://www.hotjobs.com
Received on Wednesday, 14 August 2002 10:37:12 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:15 GMT