title: Inline block element, not inline in this case
body: <p>I have set my search bar <code>div</code> element as <code>inline-block</code>, as well as the <code>img</code>.</p>
  
  <p>However, the <code>div</code> element is below the image, instead on the same horizontal line.</p>
  
  <p>Anyone can advise me why this is happening?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  #header {
    width: 100%;
    height: 60px;
    background-color: #f1f1f1;
  }
  #header img {
    height: 56px;
    display: inline-block;
    margin-left: 20px;
  }
  #search {
    display: inline-block;
  }
  #search input {
    display: inline-block;
    width: 584px;
    height: 38px;
    border: 1px solid #d9d9d9;
  }
  #search input:hover {
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" /&gt;
    &lt;div id="search"&gt;
      &lt;form&gt;
        &lt;input type="text" name="search" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>