Проблема с css float - мешает IE6 поместить div в следующую строку

Question

У меня проблема с плавающими div в IE6.

Слева есть один навигационный блок и один контентный блок для остальной части страницы. У них есть следующие значения CSS:

#navigation {
    float: left;
    width: 185px;
    padding-left: 5px;
    overflow: auto;
    height: 100%;
}

#content {
    overflow: auto;
    height: 100%;
}

В Firefox, IE8, Chrome и Opera я получаю полосы прокрутки для содержимого div, когда я изменяю размер страницы до размера, когда оба div не могут поместиться в целом. Блок навигации остается на своем месте. И это желаемое поведение.

Но в IE6 нет полос прокрутки для содержимого div. Вместо этого, когда страница становится слишком маленькой, IE6 просто помещает div контента под div навигации.

Знаете ли вы, как помешать IE6 от такого поведения?

P. S .: Я использую IETester для отображения сайта в режиме IE6. Я надеюсь, что эта программа работает правильно.

Answer 1

Думаю, этот плагин поможет: jQuery Masonry

Masonry - это плагин макета для jQuery. Думайте об этом как об обратной стороне CSS-плавающих элементов. В то время как плавающие элементы располагаются горизонтально, а затем вертикально, масонство размещает элементы вертикально, а затем горизонтально в соответствии с сеткой. Результат сводит к минимуму вертикальные промежутки между элементами разной высоты, точно так же, как каменщик укладывает камни в стену.

Answer 2

Я написал функцию сниффинга браузера в JSP и теперь добавляю дополнительный код, когда браузер IE6.

Я добавляю свойство css float:left к content. И для window.resize я выполняю следующую функцию, чтобы изменить ширину content:

contentWidth = (document.documentElement.clientWidth - 
document.getElementById("navigation").offsetWidth) + "px";

document.getElementById("content").style.width = contentWidth;

Answer 3

Оберните их обоих в дополнительный div с этими свойствами стиля:

div.wraps {
    width: 100%;
    overflow: hidden;
}