Comment puis-je aligner les deux conteneurs en vue?

Question

Je travaille sur une application web. L'une des vues a été divisée en différentes parties afin d'afficher différentes informations en utilisant l'ensemble de la vue et rendre les choses plus gérables. Le problème est que le début de l'information sur placementContainerRight est aligné avec les dernières informations de placementContainerLeft, ce qui me donne un grand espace libre en plus du placementContainerRight.

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

Ce sont les ID dans mon 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; 
} 

Et c'est la façon dont il regarde actuellement:

Quelqu'un sait-il Comment régler ce problème?

Answer 1

Cette réponse bon marché et simple est d'ajouter "float: left" à votre #placementContainerLeft #placementContainerRight.

Il peut être de meilleurs moyens de le faire, mais je pense que c'est le plus simple. UPDATE: oh et supprime cette énorme marge-gauche sur votre #placementContainerRight