Как я могу выстроить два контейнера в поле зрения?

Question

Я работаю над веб-приложением. Одно из представлений было разделено на разные части, чтобы отображать различную информацию с использованием всего представления и делать вещи более управляемыми. Проблема заключается в том, что начало информации о PlaceContainerRight выровняется с последней информацией из PlaceContainerLeft, что дает мне большое свободное пространство поверх размещенияContainerRight.

Мой 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:

#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 #placeContainerRight.

Там может быть лучшим способом сделать это, но я думаю, что это самый простой.

ОБНОВЛЕНИЕ: о, и удалите это огромное поле слева на вашем #placeContainerRight