Как подстроить блок по высоте с другими блоками?

Question

[keche]

Как автоматически подстроить оранжевый блок по высоте с другими, серыми блоками? Нужно чтобы оранжевый блок принимал высоту двух блоков автоматически.

Только без использования flexbox. Чтобы работало на всех старых версиях браузеров.

Answer 1

[Алексей Дзюба]

Вообще, можно с помощью джаваскрипта вроде) Воспользуйтесь, если ТЗ позволяет

Comments

[GrimJack]

не стоит пихать js везде. В данном случае он 146% не нужен

Answer 2

[Артём Белоусов]

Создайте div, в котором будут все серые блоки и оранжевый. Оранжевому поставьте height:100%;

Comments

[keche]

Если я задаю оранжевому блоку 100%, он пропадает. Может это из за свойства float? Оно есть и у оранжевого блока и у серых, чтобы выровнять их как показано на схеме.

[Артём Белоусов]

keche: Не используйте float: проблем не оберешься. Создайте контейнер для всех серых блоков. Ему и оранжевому задайте display:inline-block;

[keche]

Артём Белоусов: Когда задаю display:inline-block; у блоков появляются какие то отступы с левого и правого бока, в 4-5 пикселей. При использовании float такого не было.
И все равно не работает.
И дело в том что основному блоку не задана высота. Высота задана только серым блокам.

[Артём Белоусов]

keche: пиксели отступа-это пробелы. Решается font-size:0; в большом блоке. Можете скинуть ссылку на jsfiddle или подобное?

[keche]

Артём Белоусов: не работает font-size 0 как видите.

Вот ссылка https://jsfiddle.net/yaszshh9/

[Kovalsky]

keche: "как видите" - вижу что вы не понимаете что происходит. Размер шрифта надо обнулять не у всего подряд, а у непосредственного родителя этих элементов - .catalog-row

[keche]

Никита Полевой: я же не такой эксперт как вы. Не знал, спасибо.

Answer 3

[Localhost]

для оранжевого блока задать height:100%; пробовали?

Comments

[keche]

Если я задаю оранжевому блоку 100%, он пропадает. Может это из за свойства float? Оно есть и у оранжевого блока и у серых, чтобы выровнять их как показано на схеме.