title: css position:relative div problem
body: <p>this is part of my code:</p>
  <p>css :</p>
  <pre><code>.body .left, .right {
         position:relative;
         z-index:6;
         display:inline-block;
  }
  .body .left {
         top:0;
         left:0;
         width:100px;
         height:300px;
         margin-right:10px;
         border:1px solid #333;
  }
  .body .right {
         top:0;
         width:100px;
         height:300px;
         border:1px solid #333;
  }
  </code></pre>
  <p>and html</p>
  <pre><code>&lt;div class=&quot;body&quot;&gt;
      &lt;div class=&quot;left&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;right&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>i want them to be in one line <code>top:0;</code>,when there is no data added to <code>.left</code> or <code>.right</code> <code>div</code> it works good,  but the problem is that when i add text or something else to <code>.left</code> or <code>.right</code> <code>div</code> divs are arranged different, see example on jsfille to understand  about what i'm talking.</p>
  <p><strong>View Example :</strong> <a href="http://jsfiddle.net/Zct6S/7/" rel="nofollow noreferrer">JsFiddle</a></p>