title: 2 divs side by side, each 50%, same height
body: <p>I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div class="parent"&gt;    
   &lt;div class="font" id="left"&gt;&lt;/div&gt;
   &lt;div class="font" id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS looks like this:</p>
  
  <pre><code>body {
      margin: 0;
  }
  #left {
      width: 50%;
      background: lightblue;
      display: inline-block;
      height: 100%;
  }
  #right {
      width: 50%;
      background: orange;
      display: inline-block;
      height: 100%;
  }
  .parent{
      font-size:0;
      margin: 0;
      height: 40px;
  }
  .font{
      font-size:16px;
  }
  </code></pre>
  
  <p>font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).</p>
  
  <p>This works fine. It keeps working when I add content to <strong>both</strong> the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.</p>
  
  <p>Here's the JSFiddle with content in the left block: <a href="https://jsfiddle.net/dave_s/phon1tws/" rel="nofollow">https://jsfiddle.net/dave_s/phon1tws/</a></p>
  
  <p>I've also tried overflow:hidden, but that shrinks the block with the content.</p>
  
  <p>Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!</p>
  
  <p>Thanks  a lot!</p>