title: Why does scrollWidth only include the left padding?
body: <p>So, I have a DIV <code>#Wrapper</code> which has a fixed width. Inside that DIV, I have another DIV <code>#Panel</code> which also has a fixed width:</p>
  
  <pre><code>&lt;div id="Wrapper"&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;div id="Panel"&gt;Panel&lt;/div&gt;
      &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Sometimes, the width of the Panel is larger than the with of the Wrapper, and in those cases I would like to widen the Wrapper via JavaScript, so that it wraps the Panel perfectly.</p>
  
  <p><strong>Live demo:</strong> <a href="http://jsfiddle.net/H6rML/" rel="noreferrer">http://jsfiddle.net/H6rML/</a></p>
  
  <p>I intended to use <code>.scrollWidth</code> on the Wrapper to determine the width of the Panel. However, the problem is that the Wrapper has horizontal padding, and the <code>.scrollWidth</code> for some reason only includes the left-padding of the wrapper. So:</p>
  
  <pre><code>Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
  </code></pre>
  
  <p>So, given:</p>
  
  <pre><code>#Wrapper {
      width: 200px;
      padding: 10px;        
  }
  
  #Panel {
      width: 300px;
  }
  </code></pre>
  
  <p><code>Wrapper.scrollWidth</code> returns <code>310px</code>, which is not very useful. If <code>.scrollWidth</code> didn't include any padding and only returned the width of the Panel, I could work with that (I would add the padding manually to that value). If both paddings were included, I could work with that too. But why is only the left padding included? (Btw this behavior appears to be cross-browser.)</p>
  
  <p>A few additional notes:</p>
  
  <ol>
  <li><p>I cannot set the width on the Wrapper directly. In my actual code, I set the width on an ancestor element that is several levels above the Wrapper, and I use a custom API to set the width. This is why I need to retrieve the full <code>320px</code> value.</p></li>
  <li><p>I would like a solution that does not depend on the content of the Wrapper. In my demo it's a Panel, but in other scenarios there could be a different element that overflows, or even multiple elements. That is why I went with <code>.scrollWidth</code> on the Wrapper.</p></li>
  </ol>
  
  <p>Is there a way to get the value <code>320px</code> without having to manually add the right padding to the <code>.scrollWidth</code> value?</p>
  
  <hr>
  
  <p>Btw, according to the standard, the right padding should be included:</p>
  
  <blockquote>
    <p>The scrollWidth attribute must return the result of running these
    steps:</p>
    
    <ol>
    <li><p>If the element does not have any associated CSS layout box return zero and terminate these steps.</p></li>
    <li><p>If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).</p></li>
    <li><p>If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).</p></li>
    <li><p><strong>Return the computed value of the 'padding-left' property, plus the computed value of the 'padding-right', plus the content width of the element.</strong></p></li>
    </ol>
  </blockquote>
  
  <p>Source: <a href="http://www.w3.org/TR/cssom-view/" rel="noreferrer">http://www.w3.org/TR/cssom-view/</a></p>
  
  <p>Why don't the browsers behave accordingly?</p>
  
  <hr>
  
  <p>To further improve the clarity of my post, let me sum up the two main questions:</p>
  
  <p>(1) If the standard states that the right padding should be included in the <code>.scrollWidth</code> value, then why don't the browsers behave accordingly?</p>
  
  <p>(2) Is it possible to retrieve the correct value (<code>320px</code> in my case), without having to manually add the right padding?</p>
  
  <hr>
  
  <h1>This question has been answered in another thread</h1>
  
  <p>The answer to this question is located here: <a href="https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par">When a child element overflows horizontally, why is the right padding of the parent ignored?</a></p>
  
  <p>​</p>