Вложенные друг в друга clearfix. Как решить?

Question

[Александр]

Привет!
Двухколоночная сетка: левая фиксированной ширины, правая тянется на всю ширину.
Использую clearfix

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}

Внутри правой колонки тоже есть контент, в котором тоже нужно очищать поток.
Возникает неприятная штука:

Вот полностью этот пример: https://jsbin.com/duritozara/edit?html,css,output

Ребят, подскажите, как выйти из ситуации?
Спасибо.

Answer 1

[Александр]

Самоответ :)
Тут хорошо раскрывается проблема:
css-live.ru/tricks/novaya-alternativa-clearfix-u-i...

.clearfix  {
        /* display: table */
        -height: 1%; /*IE6*/
        *zoom: 1; /*IE6-7*/
        display: table;
}
/* Очень важное дополнение! */
.clearfix:after {
    /*content: '1 1';*/  /*Op15+*/
   content: '1 1 1 1 1 1 1 1 1 1 1'; /*Op12+*/
   font: .1px/0 a;
   display: block;
   word-spacing: 99in;
   overflow: hidden; /*IE8-*/
}

Answer 2

[Михаил Чирский]

Как то так можно еще
jsfiddle.net/zzuf7tsx

проблема у вас растягивается контейнер, на высоту сайд бара, т.к наследуется от него, простой способ, внутрь правого блока добавить блок и сделать ему float: left; и все заработает, а вообще такие штуки делаются через position, их и адаптировать легче потом

Comments

[Михаил Чирский]

SelenIT2: способов куча) я привел самый известный и простой, я просто его использовал, когда не было поддержки ::after ::before, когда еще был наш любимый ослик 6