Как растянуть задний фон дива?

Question

[kozavr]

Как сделать серый фон у блока слева по высоте таким же как и у блока справа? Оба блока прописаны как div-ы и вложены в еще один div, у которого высота в css прописана так:
max-height: 1200px;
я попытался у левого блока в css прописать height: 100%; но это ничего не дает, хотя по описанию атрибута, это должно растягивать его по всей высоте блока, в который он входит. Он ни хрена не растягивается, а сжимается до последней строчки того контента, который у него внутри.

Comments

[kozavr]

Если это важно: и у левого и у правого дива прописан атрибут флоат. Но я убирал атрибут у левого, на фон это никак не повлияло.

Answer 1

[iBird Rose]

задай родителю display: flex;

Comments

[kozavr]

попытался, но так как атрибут мне незнакомый еще, видимо что-то не так делаю, все разваливается. Особенно с учетом того, что там флоаты, не удивительно.

Answer 2

[neeil]

background-size: 1200px;

Comments

[kozavr]

Этот атрибут вроде как применяется только к картинкам:
www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

[Ankhena]

Варианты:
1. Для родителя задать display:flex, остальные свойства по макету.

2. Фон задавать не ячейкам, а родителю. Если нужен не непрерывный фон, то задавать его градиентом.

3. С помощью JS узнавать высоту правого и левого столбика, брать максимальную.

Первый вариант самый умный для ИЕ10+

Comments

[kozavr]

Эти элементы флоатирующие, видимо поэтому когда я задаю display:flex они разваливаются.
Это задание из курса по основам css, не предполагается что студент знает JS.
Ладно, спасибо.

[Ankhena]

kozavr: значит, 3 вариант Вам не подходит.
Кроме flex есть еще display:table, но с флоатами придется разобраться.

[Ankhena]

kozavr: И, насчет высоты 100%. Блок бы растянулся на всю высоту родителя, но у его родителя высота равна 0, потому что все дети выбиты из потока float'ом.
Поможет overflow, border или доп.блок.