Работа с 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; во второй div

Это отличается (и в некотором смысле ближе к тому, что было запрошено), чем размещение float: left; во втором div, потому что оно сохраняет ширину 2-го div, расширяющуюся как можно дальше вправо без значений ширины жесткого кодирования. 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 или принудительного фиксированного измерения, которое вы, возможно, не сможете сделать. Не взламывайте, когда существует верное решение. Вы хотите, чтобы он плавал, используйте float.

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

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

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

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

Затем вы попросили другого 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>