title: Two inline-block elements, each 50% wide, do not fit side by side in a single row
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Width issue&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
      margin: 0;
  }
  #left {
      width: 50%;
      background: lightblue;
      display: inline-block;
  }
  #right {
      width: 50%;
      background: orange;
      display: inline-block;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="left"&gt;Left&lt;/div&gt;
      &lt;div id="right"&gt;Right&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/5EcPK/" rel="noreferrer">http://jsfiddle.net/5EcPK/</a></p>
  
  <p>The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.</p>
  
  <p>I am able to resolve the issue reducing the width of one of the divs to 49%. See <a href="http://jsfiddle.net/mUKSC/" rel="noreferrer">http://jsfiddle.net/mUKSC/</a> . But this is not an ideal solution because a small gap appears between the two divs.</p>
  
  <p>Another way I am able to solve the problem is by floating both the divs. See <a href="http://jsfiddle.net/VptQm/" rel="noreferrer">http://jsfiddle.net/VptQm/</a> . This works fine.</p>
  
  <p>But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?</p>