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

Re: scroll bar size in width calculations

From: Barry Rader <brader@boldinternet.com>
Date: Fri, 21 Dec 2007 16:00:06 -0500
Message-ID: <476C2956.8040709@boldinternet.com>
To: "www-style@w3.org" <www-style@w3.org>

I cannot find any documentation on it either about this.

'margin-left' + 'border-left-width' + 'padding-left' + ('max-width' or 
'width' or 'min-width') + 'padding-right' - "scrollbar width"  + 
'border-right-width' + 'margin-right' = width of containing block

This does seems to be the current way it is done in most browsers.

I can see arguments for the other way as well.

'margin-left' + 'border-left-width' + 'padding-left' + ('max-width' or 
'width' or 'min-width') + 'padding-right' + "scrollbar width"  + 
'border-right-width' + 'margin-right' = width of containing block

However I do know that if this behaviour is changed to the below example 
it would make this a lot less useful. Being that the scroll bar size 
changes with varying user agents. This could cause some very funny 
looking websites.

So as a developer I would rather take into account the scroll bar size 
inside the containing block  subtracting from the width rather then have 
it change the overall size.

Barry Rader

Alex Mogilevsky wrote:
> We are trying to understand the standard rules for sizing with 
> overflow:scroll.
> 
>  
> 
> Per the CSS 2.1 spec, section 11.1.1, there is a reference to exactly 
> where the scrollbar goes as well as a reference to how the scrollbar 
> impacts the box model calculations:
> 
>  
> 
> In the case of a scrollbar being placed on an edge of the element's box, 
> it should be inserted between the inner border edge and the outer 
> padding edge. The space taken up by the scrollbars affects the 
> computation of the dimensions in the rendering model.
> 
>  
> 
> The visual model formatting details has details such as the following in 
> 10.3.3 for Block-level, non-replaced elements in normal flow:
> 
>  
> 
> 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 
> 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar 
> width (if any) = width of containing block
> 
>  
> 
> None of the above rules appear to suggest that specified ‘width’ is 
> changed when scrollbar is present and the settings are otherwise not 
> overspecified.
> 
>  
> 
> However the attached example is rendered identical in all browsers we 
> try. Is there something in the spec that requires subtracting scrollbar 
> width from ‘width’, or is there language elsewhere which gives UA 
> freedom to do so?
> 
>  
> 
> Thanks
> 
> Alex
> 
> 
> ------------------------------------------------------------------------
> 
> width:100px; height:100px;
> 100px
Received on Friday, 21 December 2007 21:00:33 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:57 GMT