Вопрос по сеткам

Курсы §15. Сетки
1

У меня такой вопрос, знатоки:
почему два отдельных дива с блоками со своим background-color, находящиеся внутри другого дива с другим background-color убирают его фон?

Т.е.:

<div class="promo">
  <div class="promo-1"></div>
  <div class="promo-2"></div>
</div>

CSS:

.promo {
background-color: #34495e;
}

.promo-1 {
display: table;
float: left;
background-color: #c0392b;
}

.promo-2 {
display: table;
float: right;
background-color: #c0392b;
}

По идее должно быть два красных блока на синем фоне, но получается два красных блока на отсутствующем фоне.

2

Ваш блок .promo схлопнулся по высоте. Об этом эффекте рассказано в курсе, нужна распорка.
Display: table; уберите.

1 лайк