How can I align two containers?

Question

I am working on a web application. One of the views was divided into different parts to display various information using the entire view and make the material more manageable. The problem is that the start of the ContainerRight placement information is lined up with the latest information from the ContainerLeft placement, giving me a lot of free space on top of the ContainerRight placement.

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

This is the id in my 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;
}

And it looks like this:

Does anyone know how to fix this problem?

Answer 1

This cheap and easy answer is to add "float: left" to your #placementContainerLeft #placementContainerRight.

, , .

UPDATE: oh #placementContainerRight