W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: Insufficient margins/padding for list-items/quotes/etc. next to floats

From: L. David Baron <dbaron@dbaron.org>
Date: Sat, 26 Dec 2009 19:54:54 -0500
To: www-style@w3.org
Cc: Aryeh Gregor <Simetrical+w3c@gmail.com>
Message-ID: <20091227005454.GA4765@pickering.dbaron.org>
On Saturday 2009-12-26 19:30 -0500, Aryeh Gregor wrote:
> Look at the following document:
> 
> data:text/html,<!doctype html><div style="float:
> left;padding:1em;margin:0 1em 1em 0;border:1px solid
> black;height:5em">Floated text</div><ul><li>Badly-displayed
> bullet</li></ul><p>A paragraph.</p><ul
> style="clear:left"><li>Properly-displayed bullet</li></ul><p>Another
> paragraph</p>
> 
> The first bullet looks wrong: it's not indented relative to the
> surrounding text.  This is because the extra padding is left behind
> the float, and doesn't actually push the text (or bullet) out past the
> surrounding text.  This problem arises pretty commonly on Wikipedia.

Hmmm.  I think I know the problem you're talking about, but I don't
see it in your testcase.

> My initial thought is a new property, inherited, like (names not
> remotely serious)
> 
> extra-float-spacing: none | new-behavior
> 
> "none" would give the current behavior.  "new-behavior" would behave
> something like this.  Suppose we have a line box L that would overrun
> a float F.  Let E be the most distant ancestor of L that is not an
> ancestor of F.  When shrinking L, leave an extra amount of space equal
> to the space you would get if E established a new block formatting
> context, plus the margin of E (subject to margin collapsing).  As
> usual, if the line box can no longer fit, it gets pushed down.  I'm
> being lazy here in saying how much space should actually be left --
> the idea is all the margins and padding of E and its descendants
> containing L, but with margin collapsing and other magic working as
> usual.

There was actually a proposal for this in old drafts of css3-box:
http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-float-displace
(See also my comments on it in
http://lists.w3.org/Archives/Public/www-style/2008Feb/thread.html#msg116 .)

I think the biggest question is whether there's a good-enough
solution for automatically determining the relevant ancestor (in
your wording, E) or whether (as in the original proposal cited
above, but not my modifications to it) that ancestor needs to be
specified explicitly.

(I could probably say something more coherent after spending a while
thinking about it, but I wanted to point out the existing proposals
sooner rather than later.)

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/
Received on Sunday, 27 December 2009 00:55:26 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT