在下面的表格中对齐两个并排的div螺丝

Question

I have two divs side by side. I want to align the contents of one to the left and the contents of the other to the right. The left aligns properly but when I align the right, it screws up the input table just below. (See image)

This

Sadly Becomes

This

I feel like this is probably a really simple question but I just can't figure it out, though I swear I've done it before.

Here's the html (I've removed some php loops in the middle of it because I doubt it's relevant but let me know if you think it is):

    <div class='uppertitle'>
        <div class='question'><h4>What does {$business['name']} aim to achieve within the next three months?</h4></div>
        <div class='addRow'><input type="button" value="Add Goal" onclick="addRow('threemonths')" /></div>
    </div>
    <div class='goals_table'>
    <table id="threemonths" class= 'milestones' width="350px" border="1">

        <tr>
            <td class= 'deleteRow'><input type="button" name="Delete" onClick="newDelete(this);"/> </td>
            <td><input type="text" name="txt[]" value='{$goal['description']}'/><input type="hidden" name="type[]" value='threemonths'></td>
        </tr>

    </table>
    </div>

And here's the CSS:

.addRow {
    float: right;
    display: inline;
}

div#goals .question {
    float: left;
    margin-left: 40px;
    display: inline;
}

.goals_table {
    display: block;
}

A sample of the element can be found here: https://dl.dropboxusercontent.com/u/11993667/Hosting%20Signup%20%7C%20%7C%20Page%2010.html

Thanks in advance.

Answer 1

You are going to need this CSS on the table.

clear: both

clear will prevent items from sitting on left , right or both the sides of an element.