Почему этот div не плавает правильно?

Question

У меня есть два списка и две кнопки. Каждый список находится в своем собственном div, а две кнопки - в своем собственном div. Один список должен быть слева, а две кнопки должны быть справа от него, а другой список - справа от кнопок. Это разметка, которую я использую, но она помещает 2-й список ниже кнопки Удалить.

<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

Вероятно, вам следует оставить их всех слева, чтобы получить макет, который вы описали. div s по умолчанию визуализируются с помощью block-display, что приведет к переносу строки между # 2 и # 3, если вы не используете их.

Answer 2

Пропустите все три деления влево.

Кроме того, вы должны установить явную ширину для плавающих элементов.

Answer 3

Первый элемент div со списком будет перемещаться влево, а остальные элементы будут занимать оставшееся место на странице, которая будет справа от элемента div, плавающего слева.

Вам нужен трехколонный макет? Если это так, вам нужно что-то вроде этого

<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>