如何排列兩個容器？

Question

我正在開發一個web應用程序。其中一種觀點被分爲不同的部分，以便利用整個視圖展示不同的信息並使東西更易於管理。問題是，placementContainerRight上的信息的開始與placementContainerLeft的最後一個信息排列在一起，這給了我在placementContainerRight之上的一個很大的可用空間。

我的HTML：

<div id="mainContainer"> 

     <%--Start of left container --%> 
     <div id="placementContainerLeft"> 
      <%--This section will handle the three for the specific Enterprise --%> 
      <div class="section"> 
       <div class="sectionTitle"> 
        All Agencies 
       </div> 
       <div class="horLine"></div> 
       <div class="placementFill"> 
        <div class="placementItemTitle"> 
         <div class="placementTableItems"> 
          <table width="100%"> 
           <tr class="placementTableHeading"> 
            <th></th> 
            <th>Number of Accounts</th> 
            <th>Amount of Placement</th> 
            <th>Percentage of Placement</th> 
            <th>NeuPlacement Score</th> 
           </tr> 
          </table> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="section">hmmm</div> 

     <%--End of left container --%>   
     </div> 


     <%--Start of right container --%> 
     <div id="placementContainerRight">   
      <%--This section handles the Bar FusionChart --%> 
      <div class="section"> 
       <div class="sectionTitle"> 

這是ID在我的CSS：

#mainContainer 
{ 
    width:900px; 
    vertical-align: top; 
    margin-left:20px; 
    float:left; 
} 
#placementContainerLeft 
{ 
    width:578px; 
    margin-left:5px; 
    clear:left; 
} 
#placementContainerRight 
{ 
    width:267px; 
    margin-left:628px; 
    clear:right; 
} 

，這是它目前的樣子：

有誰知道如何解決這個問題？

Answer 1

這個便宜又簡單的答案是將「float：left」添加到#placementContainerLeft #placementContainerRight。

還有可能是更好的方法來做到這一點，但我認爲這是最簡單的。

更新：哦，並刪除#placementContainerRight左邊的巨大餘量