Re: Overflow and Margins

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.

Contents are clipped to the padding box. But that doesn't change _the
position or size of the padding box_.

It just sits where it is, with its contents spilling out of it. What you
scroll around is the bounding box of the contents, not the padding box
itself.

If you think about the diagram in 8.1, the padding edge surrounds the
content edge, and the border edge surrounds the padding edge. None of
that changes just because the box is overflowed.

The contents are fitted into the content area, which is inside the
padding. They may overflow. That means they spill over the padding, not
that they push it out to the side.

Received on Monday, 4 February 2008 16:52:54 UTC