Re: Float margin relativity (Was Re: Underhang protection)

On Wednesday 28 February 2007 20:03, Daniel Beardsmore wrote:

>    <div style="display: float; width: 10em; height: 6em; border: 2px
> solid black; margin: 0.5em">Float</div>
>
>    <blockquote>This is a quotation</blockquote>
>
>    <p>Lorem ipsum dolor</p>
>
> This will produce:
>
> +------------------+ This is a quotation
>
> |Float             |
> |
> |                  | Lorem ipsum dolor
>
> +------------------+
>
> The blockquote normally has a left margin relative to its parent
> container, but when it sits to the right of a float, it doesn't. I
> would guess that there's a nasty hack somewhere for this, too, but
> IMO a left margin on an element to the right of a float, should be
> obeyed.
>
> Both padding-left and margin-left are relative to the container
> element (here, assumably body) and are not influenced by floats.
> Thus, if you place floats within text, any items such as blockquote
> and bulleted lists will (with conventional default styling) get their
> left margins "removed".

There is no way to do that in CSS level 2. There is a proposal 
(currently called the 'float-displace' property) for it in level 3. 
Lists and blockquotes are indeed examples where you may want to 
preserve some extra left margin relative to normal paragraphs.

'Float-displace' would allow you to say that in some block all lines 
that are next to a float get indented a bit more than normal, viz., by 
the sum of the block's margin and padding.


    HEADING: EXAMPLE WITH FLOAT-DISPLACE

       This is a normal block and there is no float next to it.
       It has some small margin, as you can see.

         This is a block with more margin. Maybe it is a list or
         a blockquote. Without any floats near it, it is quite
         recognizable thanks to that extra indentation.

       This block has that small left margin, but behaves normally,
    +--------+ i.e., it wraps around a float tightly, consuming its
    | Float  | own margin first, before indenting the lines to
    |        | avoid the float.
    |        |
    |        |      This block has a 'float-displace' that makes it
    +--------+      get some extra indent where it is next to a
         float. It looks as if its normal margin is added to the
         float's margin. This might be a blockquote.

       And this is a normal block again. It has the same small
       margin as normal paragraphs.


In this example, the blockquote actually gets too much extra indent. 
Somehow we'd like it to get only as much extra indent as it has without 
the float's presence. But we don't know how to specify that... (One 
idea is that the author should try to specify the normal margin with 
the 'margin' property and the extra margin of blockquotes and lists 
with the 'padding' property and then let 'float-displace' only add the 
padding and not the margin.)



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Wednesday, 28 February 2007 19:56:36 UTC