title: Why do "inline-block" elements in a "nowrap" div overflow?
body: <p>The following code causes #headline to overflow #wrapper and I do not understand why this is happening.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="logo"&gt;
          &lt;img src="/test.png"&gt;
      &lt;/div&gt;
      &lt;div id="headline"&gt;
          &lt;h1&gt;This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      background: #fea;
      white-space: nowrap;
      width: 50%;
  }
  
  #logo {
      display: inline-block;
      vertical-align: middle;
  }
  
  #logo img {
         width: 6em; 
  }
  
  #headline {
       display: inline-block;
       vertical-align: middle;
       white-space: normal;
  }
  </code></pre>
  
  <p>Example code: <a href="http://jsfiddle.net/XjstZ/21/" rel="noreferrer">http://jsfiddle.net/XjstZ/21/</a> or <a href="http://tinkerbin.com/XvSAEfrK" rel="noreferrer">http://tinkerbin.com/XvSAEfrK</a></p>