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
Use Position properties when your height and width are fixed
<div style="width:200px;height:100px;position:relative;background:#ccc;">
<div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
</div>
<div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
</div>
</div>