Задать вопрос
librown
@librown
На-все-руки-мастер и немного кодер

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

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

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


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

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

Ребят, подскажите, как выйти из ситуации?
Спасибо.
  • Вопрос задан
  • 197 просмотров
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
  • beONmax
    Курс HTML / CSS
    1 месяц
    Далее
  • Бруноям
    Вёрстка на HTML и CSS
    3 месяца
    Далее
  • Международная Школа Профессий
    Онлайн-курсы HTML и CSS для начинающих
    3 недели
    Далее
  • Stepik
    Основы вёрстки с HTML и CSS
    1 неделя
    Далее
  • beONmax
    Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
    1 месяц
    Далее
Пригласить эксперта
Ответы на вопрос 2
librown
@librown Автор вопроса
На-все-руки-мастер и немного кодер
Самоответ :)
Тут хорошо раскрывается проблема:
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-*/
}
Ответ написан
Комментировать
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Как то так можно еще
jsfiddle.net/zzuf7tsx

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

Войдите, чтобы написать ответ

Похожие вопросы