Re: Float overflowing behavior

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. 
Besides:
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 
Good!
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 
specification.
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?

'inline-block'

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

Cheers,
-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/

Received on Friday, 16 August 2002 03:48:16 UTC