css - 如何在左边放置一个div，在右边放置两个div

Question

我有这个 main_window div，宽 800px，高 550px，然后它旁边应该有两个 div，troubleshooting_area 和 timeline div，这两个弥补了 550高度但需要 float 到主窗口的右侧下面的两个 div 应该在主窗口旁边，我该如何实现？？

这是一个演示 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 类。

您可以在这里看到更新的 fiddle :http://jsfiddle.net/S8RC3/4/