Question

I am working on a web app. One of the views has been divided into different portions in order to display different information utilizing the whole view and make stuff more manageable. The problem is that the beginning of the information on placementContainerRight gets lined up with the last information from placementContainerLeft giving me a big free space on top of the placementContainerRight.

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 are the id’s 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 this is the way it currently looks:

Does anybody know how to fix this problem?

Answer 1

This cheap and simple answer is to add “float: left” to your #placementContainerLeft #placementContainerRight.

There may be better ways to do this, but I think this is the simplest.

UPDATE: oh and remove that huge margin-left on your #placementContainerRight