css float / positioniong

Question

Итак, у меня есть маленький div для границы и три div внутри (см. Изображение в конце). Зеленый - полный размер (без заполнения и т. Д.); Синий должен плавать влево и иметь определенную ширину; Красный должен плавать вправо, а также иметь определенную ширину. Однако я что-то напутал. Оба синих и красных div'а плавают вне основного div. Что я тут не так делаю?

Вот мой текущий код:

<div style="border: 2px solid black; width: 630px;">
  <div style="width:auto;">Lorem ipsum</div>
  <div style="width:150px; float:left;">This is the blue box</div>
  <div style="width:150px; float:right;">This is the red box</div>
</div>

Идеальный поплавок http://www.mfrl.org/images/howtofloat.png

Answer 1

Положение поплавков смешное. По сути, основной div не учитывает высоту плавающих элементов при расчете собственной высоты. Самый простой способ решить эту проблему - добавить очищающий элемент после всплывающих элементов.

Эта скрипка должна четко объяснить: http://jsfiddle.net/QQxb3/2/

Я думаю, что люди, которые прокомментировали ваше сообщение о том, что он работает, должны неправильно понимать, что вы подразумеваете под «основным дивом», потому что спецификация, которой следует Chrome, а IE следует в данном конкретном случае, будет помещать всплывающие элементы вне его родительского div.