title: Blocks overlapping in css
body: <p>I have 2 blocks within a block that needs to be displayed-inline but it does not work when I give display-inline.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/8T5RZ/" rel="nofollow">http://jsfiddle.net/8T5RZ/</a></p>
  
  <p>I need the 2 blocks to be displayed side by side instead of overlapping</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outer-container"&gt;
      &lt;div class="inner-container"&gt;
          &lt;div class="innermost-container" /&gt;
          &lt;div class="innermost-container" /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.innermost-container{
      background-color:green;
      width:100px;
      height:100px;
      border-style:solid;
      border-width:5px;
  }
  </code></pre>