Как разместить один div слева и два divs вправо

Question

У меня есть это main_window div, ширина 800 пикселей, высота 550 px, тогда есть два divs, которые должны быть рядом с ним, troubleshooting_area и timeline div, те два составляют до 550 в высоту, но должны быть плавающие справа от главного окна два divs ниже должны быть рядом с главным окном, как я могу достичь этого?

здесь демонстрационный http://jsfiddle.net/S8RC3/3/

<div class="appview_fullscreen app_ama"> 
<center><strong>Auto Mechanics Alliance</strong> </br> 
    <i>let us come together and become one</i> 
</center> 
<div class="main_area"> 
    <div class="tabs_area"> 

    </div> 
    <div class="main_window"> 

    </div> 
    <div class="troubleshoot_area"> 

    </div> 
    <div class="timeline"> 

    </div> 
</div> 


</div> 


body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 
.appview_fullscreen 
{ 
    width: 1005px; 
    background-color: black; 
    color: white; 
    font-size: 20px; 
    margin: 0px; 
    padding: 2px; 
} 
.main_area 
{ 
    border: 2px solid green; 
    padding: 2px; 
    margin: 0px; 
} 
.tabs_area 
{ 
    border: 1px solid green; 
    height: 20px; 
} 

.main_window 
{ 
    min-height: 550px; 
    border: 1px solid green; 
    width: 800px; 
    margin: 2px 1px 1px 1px; 
} 
.troubleshoot_area 
{ 
    border: 1px dotted green; 
    height: 200px; 
    width: 200px; 
} 
.timeline 
{ 
    border: 1px solid green; 
    height: 350px; 
    width: 200px; 
} 

Answer 1

В вашем случае я бы просто добавить:

position: absolute; 
top: 76px; 
left: 808px; 

своим .timeline и .troubleshoot-area классов.

Вы можете увидеть обновленную скрипку здесь: http://jsfiddle.net/S8RC3/4/

Answer 2

Попробуйте эти способы.

CSS

body 
{ 
    width: 99%; 
    height: 100%; 
    margin: 0px; 
} 
.appview_fullscreen 
{ 
    width: 1005px; 
    background-color: black; 
    color: white; 
    font-size: 20px; 
    margin: 0px; 
    padding: 2px; 
} 
.main_area 
{ 
    border: 2px solid green; 
    padding: 2px; 
    margin: 0px; 
} 
.tabs_area 
{ 
    border: 1px solid green; 
    height: 20px; 
} 

.main_window 
{ 
    min-height: 550px; 
    border: 1px solid green; 
    width: 800px; 
    margin: 2px 1px 1px 1px; 
    display:inline-block; 
} 
.troubleshoot_area 
{ 
    border: 1px dotted green; 
    height: 200px; 
    width: 200px; 
    position: absolute; 
    top: 76px; 
    left: 808px; 
} 
.timeline 
{ 
    border: 1px solid green; 
    height: 350px; 
    width: 200px; 
    float:right; 
    position: absolute; 
    top: 76px; 
    left: 808px; 
} 

DEMO Fiddle