Re: Overflow and Margins

On Mon, Feb 04, 2008 at 09:31:05AM -0800, Brad Kemper wrote:
> 
> 
> On Feb 4, 2008, at 8:52 AM, Ben Cotterell wrote:
> 
> >
> >On Mon, Feb 04, 2008 at 08:26:24AM -0800, Brad Kemper wrote:
> >[...]
> >>>>>If I do this:
> >>>
> >>>>><div style="overflow: scroll; width: 200px; padding: 50px">
> >>>>>    <div style="width: 600px; border: 2px solid green"></div>
> >>>>></div>
> >>>
> >>>>>I can scroll to the right and keep scrolling and see the 50px gap.
> >>>>>Works in Firefox and Opera.
> >>>
> >>>It does "work" in Firefox and Opera, but it isn't right. As you
> >>>say, the
> >>>container's right padding should be immediatley to the right of its
> >>>content area container, not at the right of its overflowing  
> >>>contents.
> >>
> >>Except that it is not just the content area that is scrolled. It is
> >>the padding box [1] that is scrolled, including the right padding and
> >>bottom padding.
> >
> >I don't think so. That's also how I got confused, but it's not what
> >should happen.
> 
> "Should" according to the spec, or "should" according to an author's  
> reasonable expectations?

According to the spec.

The spec clearly says that the padding edge surrounds the content edge.

The fact that content overflows does not move the content edge (or
therefore the padding edge). If it did, the spec would have to explain
how, in the section on overflow, and most of 10.3.* would have to be
rewritten in some unknown way, because it's based on the idea that
horizontal margins + padding + borders + content width = containing
width.

> >Contents are clipped to the padding box. But that doesn't change _the
> >position or size of the padding box_.
> 
> It could if the specification were to clearly say it does, and the  
> implementors followed that spec.

Yes but it's not clear how you would change the spec to achieve this. A
box can't have ragged padding.

Consider this:

    #foo, #bar { height: 100px; border: 2px solid black }
    ...

    <div style="width: 200px; padding: 50px; overflow: scroll">
        <div id="foo" style="width: 400px"></div>
        <div id="bar" style="width: auto"></div>
    </div>

I expect to see 50px of padding to the right of #bar. If I scroll right,
and get another 50px of padding to the right of #foo (which is what you
get in Firefox 2.0.0.11 for example, but which is wrong), then the
container's padding is not even box-shaped.

It doesn't really make sense to define it that way, unless you want to
make #bar's used width 400px, but often that won't be what authors want.

Received on Monday, 4 February 2008 18:07:33 UTC