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