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.