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

Re: Float overflowing behavior

From: Vadim Plessky <lucy-ples@mtu-net.ru>
Date: Fri, 16 Aug 2002 11:54:33 +0400
To: www-style@w3.org
Message-Id: <200208161154.33947.lucy-ples@mtu-net.ru>

On Wednesday 14 August 2002 6:37 pm, Bill Daly wrote:
|  --- 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.

Any solution is some kind of 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

Most documents do not have any structure, anyway. 
1) Jan Roland's example doesn't have Tables, which is Good.
2) It uses DIV's, and a whole document can be easily ported to pure XML - Very 
3) a whole page is just 7K in size (incl. copyright noticies and references). 
What can be better?...  :-))

|  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;
|  }

I think 'inline-block' was designed for such tasks, and now it's in CSS 2.1 
See archives of this mailing list for the last (2001) year, this subject has 
been discussed several times!

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

I would back CSS3 in this case.
There is even multi-column layout in CSS3, it can solve *a lot* of such or 
similar problems!

|  Bill Daly


Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
KDE mini-Themes
Received on Friday, 16 August 2002 03:48:16 GMT

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