Как решить проблему вложенности div с float?

Question

[tester_toster]

Есть страница: две колонки. Одна фиксированная вторая резиновая.
В резиновой колонке есть блоки - каждый блок содержит блоки с float. Проблема в том, что первый блок растягивается по высоте по содержимому высоты левой колонки.
Можно решить эту проблему оборачиванием блоков в резиновой колонке блоком с overflow: auto;
Можно этого как-либо избежать, так как после этого нельзя ничего вынести за границу этого блока?
Пример

Answer 1

[Андрей Токмаков]

В Вашем примере надо просто добавить overflow: auto; в .test и ни чего оборачивать ни куда не надо.
Не хотите в тест - добавьте тоже самое в .right

Comments

[tester_toster]

Из вопроса:

Можно этого как-либо избежать, так как после этого нельзя ничего вынести за границу этого блока?

[Андрей Токмаков]

tester_toster: эм... зачем Вам что то выносить за границу блока? Хотите выносить что то за пределы теста - добавьте это свойство блоку right

[tester_toster]

Повторю:

Можно этого как-либо избежать, так как после этого нельзя ничего вынести за границу этого блока?

В самом вопросе вверху написано, что способ с :overflow: auto; не подходит, так как пропадает возможность выносить что либо за рамки блоков, что необходимо...

[Андрей Токмаков]

tester_toster: Повторю - если указать всему правому столбику это свойство, то что вы собираетесь выносить за границы основной страницы? Новая фишка, контент за пределами видимости браузера?

[sadaffairs]

А если просто добавить overflow: hidden?

[tester_toster]

Андрей Токмаков:

...так как после этого нельзя ничего вынести за границу..

Еще не понятно, что способ с overflow:auto не подходит из-за своей специфики, и не важно, в каком уровне вложенности он будет находится? - Зачем выносить что-то? - Бывает - необходимо.

[tester_toster]

sadaffairs: Тоже самое, что и auto, нужна возможность выносить элементы за пределы.

[sadaffairs]

tester_toster: Я не понимаю, что вы подразумеваете под этим загадочным «выносить элементы за пределы».

Они находятся снаружи всех измерений что ли, окна браузера и элементов left-right?

[Андрей Токмаков]

tester_toster: окей, тогда убираем float: left; из .left и добавляем туда position: absolute; и вуаля

[tester_toster]

простой пример:

elem:after{
position: absolute;
width: 10px;
height: 10px;
top: 0;
left: -10px;
background: red;
content: '';
}

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

[tester_toster]

Андрей Токмаков: Капитан Очевидность предвидел такой ответ...
И начинаем зависеть от высоты правого блока...

[Андрей Токмаков]

tester_toster: Продолжим: .clearfix:after вместо display: block пишем display: inline-block

Answer 2

[Максим]

К примеру создать .cleatfix

Comments

[tester_toster]

Я вас не понял - clearfix есть, если его нужно расположить как-то иначе - напишите конкретнее.

[Froggyweb]

tester_toster: каждому блоку с флоат даете класс с клеарфиксом либо добавляете стили очистки к каждому блоку

Answer 3

[sadaffairs]

А как насчёт использования flexbox в резиновой колонке для того, чтобы выровнять блоки так, как вам и нужно?

Comments

[tester_toster]

Поддержка старых браузеров...

[Ярослав Иванов]

tester_toster: зачем ?

[tester_toster]

Ярослав Иванов: Если начальник сказал, что хомячок - птичка, значит придется его учить летать) Это уже не напрягает - есть казусы и по круче)