如何将视图中的两个容器对齐?

我的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">

这是我的css中的id:

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

这就是它目前的样子:

有人知道如何解决这个问题吗?