Q on Floating elements

Jan Roland Eriksson wrote:

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

Sorry for not being more responsive, the issue is indeed interesting.

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

Whenever in doubt, read CSS2 :)

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

Section 9.5 of CSS2 has an image which is very similar to your
example. As you can see there, the floated element will not influence
the size of its parent element. So, Opera is correct.

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

To achieve the effect you want, look at the next image in section 9.5.
By attaching "clear: right" to the next "label" element, you ensure
that it doesn't start until the floated element is finished. However,
there is one difference: padding and borders will overlap when using
'float' and 'clear'. So, it's not possible to e.g. create one single
border which encompasses the label and the floating text element (a la
the outer border of IE's rendering in the above figure). For this you
need tables.

-h&kon

H   ĺ   k   o   n      W   i   u   m       L   i   e
howcome@w3.org      http://www.w3.org/people/howcome
World     W      i     d     e       Web  Consortium

Received on Wednesday, 19 August 1998 12:17:42 UTC