Wie kann ich die beiden Container in Sicht ausrichten?

Question

Ich arbeite an einer Web-App. Eine der Ansichten wurde in verschiedene Abschnitte unterteilt, um verschiedene Informationen unter Verwendung der gesamten Ansicht anzuzeigen und die Dinge besser handhabbar zu machen. Das Problem ist, dass der Anfang der Informationen über placementContainerRight mit den letzten Informationen von placementContainerLeft in Verbindung gebracht wird, was mir einen großen freien Platz über PlacementContainerRight gibt.

Mein 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"> 

dies die ID in meinem CSS sind:

#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; 
} 

Und das ist so, wie es aussieht derzeit:

Weiß jemand, Wie behebe ich dieses Problem?

Answer 1

Diese billige und einfache Antwort besteht darin, "float: left" zu Ihrem #placementContainerLeft #placementContainerRight hinzuzufügen.

Dort kann bessere Möglichkeiten, dies zu tun, aber ich denke, das ist die einfachste.

UPDATE: oh und entfernen Sie diesen großen Marge-links auf Ihrem #PlacementContainerRight