Float margin relativity (Was Re: Underhang protection)

(Bert: sorry for the broken mail: Thunderbird likes to mistake paste, newline 
for Send Mail... Wonder if I can alter that binding)

>> Aside: I've got a page with a left-floated image, and to 
>> its right, a <blockquote>. I've tried padding-left, margin-left, a
>> border around the blockquote, display: block on the float ... Nothing
>> I do will put a wider gap between that float and the blockquote. I
>> hope that over the years you've found a solution to the hideous
>> problem of float stealing and destroying padding and margins from
>> elements ;-)
> 
> The way to get a margin between the float and the text is to put a 
> margin on the float rather than on the block.

OK, no, what I mean is this:

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

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