Работа с DIV и CSS

Если вы хотите, чтобы синее поле находилось рядом со списком, вам нужно также всплыть:

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; float:left;"><p>Some Text</p><p>Another paragraph</p></div>

Когда первый div перемещается влево, второй div позиционируется так, как будто его не существует (хотя любой текст внутри второго div будет обтекать плавающий div). См. Спецификацию CSS2 для получения дополнительной информации о поведении плавающих элементов.

Чтобы заставить второй div плавать рядом с первым div, вы можете добавить float: leftко второму div.

В качестве альтернативы, если ширина первого div известна, вы можете добавить левое поле ко второму div.

Добавить overflow: auto; zoom: 1.0;во 2-й див

Это отличается (и в некотором смысле ближе к тому, что было задано), чем установка float: left;2-го деления, потому что оно сохраняет ширину 2-го деления, расширяясь насколько это возможно вправо без жестких значений ширины. zoom: 1.0;необходим, чтобы дать расположение элементов в IE.

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div>

Вы хотите, чтобы второй div плавал рядом с первым? Затем вы добавляете float:leftко второму div.

Не создавайте другой div исключительно для очистки, это ужасно бессмысленно.

РЕДАКТИРОВАТЬ: overflow: autoне работает для IE, вам нужно дать div hasLayour в этом случае, который включает в себя взломать добавление zoom:1.0или форсировать фиксированное измерение, которое вы не сможете сделать. Не взламывайте, когда существует правильное решение. Вы хотите, чтобы это плавало, используйте плавание.

Причина, по которой вы видите описанное вами поведение, заключается в том, что именно эти инструкции вы даете DIV.

Давайте разберемся с этим:

<div style="border: solid 1px navy; float: left;">

Это основывается на поведении по умолчанию для всего, кроме границы, и, плавая его, вы говорите прямоугольнику прикрепить себя к левому полю (его родителя, который здесь считается телом) независимо от того, что там еще принадлежит. Ширина DIV по умолчанию составляет 100% от ширины родительского объекта (все еще тег body). Положение по умолчанию должно быть следующим элементом блока в потоке - поскольку других элементов блока нет, он выравнивается по вертикали с верхним полем.

Затем вы попросили другого DIV сделать это:

<div style="background-color: blue; float:left;">

Что по сути то же самое. Здесь вы не дали ни DIV новую ширину, ни какие-либо дополнительные инструкции о том, куда в макете они должны теперь идти, поэтому он привязывает себя к левому полю, а его верхнее поле находит ближайший элемент блока для прикрепления (все еще тело ).

Чтобы выстроить их в ряд, сделайте следующее:

  <style type="text/css">
    .leftBox, .rightBox
    {
       width: 48%; /*leave some room for varying browser definitions */
       border: 1px solid navy;
       float: left;
       display: inline; /* follow the semantic flow of the page and don't break the line */
       clear: left; /* don't allow any other elements between you and the left margin */
     }

    .rightBox
    {
       border: none;
       background-color: blue;
       clear: right;
    }
</style>
<div class="leftBox">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div class="rightBox">
    <p>
        some other text</p>
</div>