html - How align 2 adjacent divs horizontally WITHOUT float?

Question

I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs

I've tried Position:relative ,, but no luck

See the example below : http://jsfiddle.net/XVzLK

<div style="width:200px;height:100px;background:#ccc;"> 
<div style="background:Blue; float:left; width:100px; height:100px;"></div> 
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>

From the link above, I need the red box to be on the same line of blue box with no space below ..

EDIT : I want the red box to stay outside the container gray box (just as it is) thanks

Answer 1

Relative with inline-block display

---

#one {
width: 200px;
background: #ccc;
}

#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}

#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}

<div id="one"><div id="two"></div><div id="three"></div></div>