title: Sum of horizontal properties always equals width of the parent element? Is this true?
body: <p>I am reading through Eric Meyer's <em>CSS: The Definitive Guide</em>, and in his chapter on the basics of the block-level box model, he makes the following statement:</p>
  
  <blockquote>
    <p>Remember that the total of the seven horizontal properties always equals the width of the parent element. As long as all properties are zero or greater, an element can never be wider than its parent’s content area.</p>
  </blockquote>
  
  <p>By horizontal properties, he means these:</p>
  
  <p><img src="https://i.stack.imgur.com/w7Jbn.png" alt="enter image description here"></p>
  
  <p>This strikes me as prima facie false. For example, what about a situation like this:</p>
  
  <pre><code>&lt;div&gt;
    &lt;p&gt;content&lt;/p&gt;
  &lt;/div&gt;
  
  div {
    width: 100px;
  }
  
  p {
    width: 300px;
  }
  </code></pre>
  
  <p>The width of the containing block is 100 and the paragraph is 300, which means discounting all the other horizontal values the child paragraph will be unambiguously larger than its containing block's width (causing overflow). What am I missing?</p>