title: inline-block elements are line breaking for seemingly no reason?
body: <p>I have some pretty basic HTML/CSS that isn't working as I expect. Basically I have my body setup to be 400px wide. I then have two divs inside of the body with explicit widths of 300px and 100px. Additionally, both of these divs are set to <code>display: inline-block</code>. For some reason, the 100px div breaks out of the body's content area and appears below it. I don't know why this is happening. If I set the width from 100px to 96px, it works. However, if I set it to 97px, 98px, 99px, or back to 100px, it doesn't work. I find this behavior very odd. Can someone explain what is going wrong?</p>
  
  <p>Note that I am testing this on Chrome (Beta Channel). Code is below.</p>
  
  <p>The CSS:</p>
  
  <pre><code>body {
      margin: 4px;
      width: 400px;
      height: 250px;
      border: 1px solid black;
  }
  
  .list-container {
      display: inline-block;
      width: 300px;
      height: 100%;
      background-color: red;
  }
  
  .button-container {
      display: inline-block;
      width: 100px;
      height: 100%;
      background-color: blue;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="list-container"&gt;
  &lt;/div&gt;
  
  &lt;div class="button-container"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>