ясно: оба на div внутри 2 колонки жидкостного макета ломают все в FFX

Question

Используйте Firefox для этого примера. (Отлично работает в IE7)

Я сузил пример по адресу: (Где вы можете сделать -> просмотреть источник)

http://www.handbooster.com/example/tricky.html

Проблема в том, что атрибут clear: оба атрибута в красном div делит его ниже левого плавающего синего div. Это вполне может быть правильным и ожидаемым поведением, поскольку именно так FFX отображает его.

Моя проблема в том, что мне нужно найти способ, чтобы красный div был помещен непосредственно под "Subheading", НО я не могу изменить clear: оба атрибута нет красного div (как в моем случае он предоставлен третьей стороной компонент.)

Возможно ли это, или атрибут clear: оба атрибута компонента 3'd делают невозможным использование компонента в плавающем контексте, поскольку он взаимодействует с другими плавающими элементами на странице?

Answer 1

Что, если вы позиционируете container относительно, и вместо того, чтобы плавать leftnav, вы позиционируете его абсолютно?

#leftnav {
    /*float:left;*/
    position:absolute; /* New! */
    left:0px; /* New! */
    margin:0;
    padding:1em;
    width:160px;
}

#container {
    position:relative; /* New! */
    top:0px; /* New! */
    left:0px; /* New! */
    background-color:#FFFFFF;
    border:1px solid gray;
    color:#333333;
    line-height:130%;
    margin:10px auto;
    width:90%;
}

Answer 2

Вы можете установить

#content {
  float: left;
  margin-left: 0;
}

если допустимо, чтобы div содержимого был плавающим.