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

У меня есть это main_window div main_window 800px и высотой 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;
}