Почему index-content не занимает всю ширину родителя (.container)?

Question

[Иван Тарасов]

Доброго дня.
Не MAIN установлен класс .container который задаёт фиксированную ширину.
Внутри .container, есть дочерний блок с классом advantage, он занимает всю ширину родителя, а ниже есть блоки с классом .index-content, и они почему-то не занимают всю ширину родителя.
Хочу добиться эффекта чтобы .index-content занимал всю ширину родителя, а блоки внутри него - index-content-left был прижат в лево, а index-content-right в право, а оставшееся место было бы расстоянием между блоками. Но сейчас они просто слипаются и занимают не всю ширину родителя.
Интересует больше – почему такое поведение, а не как это исправить.
https://jsfiddle.net/q4aoz3kc/

Answer 1

[Алексей Николаев]

У вас некорректно установлен .clearfix. Вы забыли про то, что display:table и content должны применяться к псевдолементам, а не к самому элементу. В итоге вы устанавливаете неверный display самому контейнеру, который хотите растянуть, и он ожидаемо ведет себя иначе, нежели блочные элементы (в частности, таблицы по умолчанию не растягиваются на всю возможную ширину).

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear:both;
}

Comments

[Иван Тарасов]

Огромное спасибо. Вроде мелочь, а уже часа 2 голову ломаю почему так )))