Как расположить так блоки?

Question

[kamisarlapsha]

Привет, необходимо расположить три div следующим образом: 1 div на пол ширины и высоту 500px, 2 и 3 div на 50% оставшейся ширины и высотой они по 250px.

1 div - серый, 2 div - синий, 3 div - чёрный.


Код следующий, обернуть два последних блока не получится.

<div class="banner-block big-banner"></div>
<div class="banner-block small-banner"></div>
<div class="banner-block small-banner"></div>

В этом весь вопрос, как их так расположить ? Может float ? Но если использовать float, то высота родителя их превращается в 0px. И все элементы уже не правильно строятся. Заранее спасибо!

Answer 1

[Сергей delphinpro]

.big-banner {
  float:left;
  width: 50%;
  height: 500px;
}

.small-banner {
  margin-left: 50%;
  height: 250px;
}

Answer 2

[Олег]

на flex-ах