title: How align 2 adjacent divs horizontally WITHOUT float?
body: <p>I want to make 2 divs beside each other to be aligned on the same horizontal line <strong>WITHOUT FLOATs</strong> </p>
  
  <p>I've tried Position:relative ,, but no luck</p>
  
  <p>See the example below :
  <a href="http://jsfiddle.net/XVzLK" rel="noreferrer">http://jsfiddle.net/XVzLK</a></p>
  
  <pre><code>&lt;div style="width:200px;height:100px;background:#ccc;"&gt; 
  &lt;div style="background:Blue; float:left; width:100px; height:100px;"&gt;&lt;/div&gt; 
  &lt;div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From the link above, I need the red box to be on the same line of blue box with no space below ..</p>
  
  <p><strong>EDIT</strong> : I want the red box to stay outside the container gray box (just as it is) thanks</p>