Q on Floating elements

[this has been up twice in ciwas and created no comments,
 is it really that uninteresting?]

Reading the CSS1 spec, section 4.1.4 Floating Elements,
describes quite clearly how to position the top, left and right
edges of a floating element in relation to its parent element.

OTOH is says nothing about what relation there should be between
the bottom edge of a floating element in relation to its parent.
I.e. what should happen when the floating element renders at a
larger vertical size than its parent.

Reason for this question is that it seems like IE4 and Opera3.5
(both for Win9x/NT) has got a totally different view on how this
situation should be handled. For those of you who happens to have
access to both of these browsers I have an example page here...
http://css.nu/temp/ciwas-q.html
...look especially at the differences between how "Label 1.2" is
handled by these browsers.

A sceleton of the markup behind the example...

  <DIV CLASS=left>
    <DIV CLASS=right>
      <P>Some rather long text that wraps</P>
    </DIV>
    <P>Label 1.2</P>
  </DIV>

where .left specifies a standard "layer" that inherits its width
from BODY, and .right specifies a floating "layer" with the width
specified at 75%. Both DIV's has solid 1px borders to illustrate
the resulting sizes of them.

IE4 rendering now comes out like this...

  +----------------------------------------------------+
  |             +-------------------------------------+|
  | Label 1.2   | Some long text that wraps.Some long ||
  |             | text that wraps.Some long text that ||
  |             | wraps.Some long text that wraps.    ||
  |             | Some long text that wraps.Some long ||
  |             | text that wraps.Some long text that ||
  |             +-------------------------------------+|
  +----------------------------------------------------+

i.e. the height of the parent layer automatically increases to
fully "embrace" the contained right floating layer.

Opera 3.5 rendering instead comes out like this...

  +----------------------------------------------------+
  |             +-------------------------------------+|
  | Label 1.2   | Some long text that wraps.Some long ||
  |             | text that wraps.Some long text that ||
  +-------------| wraps.Some long text that wraps.    |+
                | Some long text that wraps.Some long |
                | text that wraps.Some long text that |
                +-------------------------------------+

i.e. the height of the parent layer stays where its needed only
to contain its own text "Label 1.2" while the contained layer is
allowed to "break out" of the bottom of its parent and take the
height required to contains its own wrapped text.

Just from reading the CSS1 specs I can't find out what is the
correct behaviour here. I would like the IE4 rendering to be
correct since I think that one is more close to the structural
markup of one DIV within another. But am I right or wrong here?

-- 
Jan Roland Eriksson - d.tek.jre@ebox.tninet.se
<URL:http://home2.swipnet.se/%7Ew-20547/>

Received on Tuesday, 18 August 1998 20:56:05 UTC