Positioning / Sorting DIV by using HTML and CSS Position instead of Table

How to use html and css to arrange / sort / position 3 divs like the picture below?
We can't do that with <table><tr><td> without css margin-top:-50px. Any other way to do it without using css margin-top:-50px? The solution is I just need css position:relative on wrapper div (green color). Then css position:relative on 1st div. Then Css position:absolute, top:10px; left:220px; on 2nd div. Then Css position:absolute, top:220px; left:210px; on 3rd div. Example of codes :
<style type="text/css">#div1 {position:relative;background-color:green;width:500px;height:500px;}#div2 {position:relative;background-color:#0FF;width:200px;height:400px;top:10px;left:10px;}#div3 {position:absolute;background-color:yellow;width:200px;height:200px;top:10px;left:220px;}#div4 {position:absolute;background-color:pink;width:200px;height:200px;top:220px;left:220px;}</style><div id="div1"><div id="div2">A</div><div id="div3">B</div><div id="div4">C</div></div>If u want to move the wrapper to center of page, u can use margin: 0 auto;

If u want to move the divs inside the wrapper to left, u can use float:left; But float:left; makes the wrapper cannot apply height:auto which depend on height of div inside the wrapper. Solution is remove float:left