[CSS21] Question on computed heights and overflow

• From: Boris Zbarsky <bzbarsky@mit.edu>
• Date: Thu, 12 Jan 2006 11:02:13 -0600
• To: www-style Mailing List <www-style@w3.org>
• Message-ID: <43C68B95.4070405@mit.edu>

I'm trying to understand the following paragraph in section 11.1.1 [1]:

   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.
   Any space taken up by the scrollbars should be subtracted from the computed
   width/height, thus preserving the inner border edge.

What does that mean in practice?  Specifically, consider the following markup:

   <div id="outer">
     <div id="inner">Text</div>
   </div>

And the styles

   #outer { overflow: auto; height: 200px; width: 200px;}
   #inner { height: 100%; width: 200%; }

Now the "outer" div overflows horizontally, so a horizontal scrollbar has to be 
inserted.  Given that, what is the computed value of "height" for the outer div? 
  Is it 100px?  Or is it (100px - 'height of scrollbar')?  And more 
specifically, what is the computed value of "height" for the inner div?

-Boris


-Boris

[1] http://www.w3.org/Style/Group/css2-src/visufx.html#overflow

Received on Thursday, 12 January 2006 17:02:25 UTC