Why isn't this div floating properly?

Question

I have two listboxes and two buttons. Each listbox is in its own div and the two buttons are in their own div. One listbox should be on the left and the two buttons should be to the right of that with the other listbox to the right of the buttons. This is the markup I am using, but it is putting the 2nd listbox below the Remove button.

<p>Available Colors</p>
    <div style="float:left; margin:5px;">
        <asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox>
    </div>
    <div>
        <asp:Button ID="btnAdd" runat="server" Text="Add" /><br />
        <asp:Button ID="btnRemove" runat="server" Text="Remove" />
    </div>
    <div style="margin:5px;">
        <asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox>
    </div>

Answer 1

You should probably float them all left to get the layout you described. divs are by default rendered with block-display, which will put a linebreak between #2 and #3, if you don't float them.

Answer 2

Float all three divs to the left.

Also, you must set an explicit width for floated elements.

Answer 3

The fisrt div with a listbox will float to the left and the other divs will take up the remaining space on the page which will be to the right of the div that is floated left.

Is it a 3 column layout you need? If so you need something like this

<div style="float:left; width:66%">
    <div style="float:left; width:50%"></div> 
    <div style="float:right; width:50%"></div> 
</div>
<div style="float:right; width:33%"></div>