Верстка блока с height: 100% для различных браузеров

Question

[toluolus]

Упрощенная схема структурного блока представлена по ссылке jsfiddle.net/6snyE/6

Ключевые требования:
1) высота блока должна определятся высотой изображения в блоке с классом block-right
2) содержимое блока с классом title должно отображаться в правом-верхнем углу блока block-left
3) содержимое блока с классом icon должно отображаться в правом-нижнем углу блока block-left

Решение представленное по ссылке относительно корректно выполняется в браузере Firefox последней версии
Единственный недостаток - высота блока block-right на несколько пикселей больше размера вставленного изображения. Причину такого поведения я найти не смог.

Если же открыть код по ссылке в браузерах Chrome, Opera или Safari, то мы можем увидеть, что высота блока с классом container не приобретает значение высоты блока block-left, несмотря на наличие свойства height: 100%;
Использование min-height вместо свойства height проблемы не устраняет.

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

Answer 1

[toluolus]

Нашел хак решающий вопрос для различных браузеров. Решение описано по ссылке 100% высоты в ячейке(display:table-cell) таблицы(display:table)

Answer 2

[Sunify]

codepen.io/sunify/pen/fomyK
Не проще абсолютами?

Comments

[toluolus]

@Sunify Ваше решение не отвечает ключевым требованиям п.3 Как Вы предлагаете позиционировать блок icon в правый нижний угол?

[Sunify]

По вкусу — codepen.io/anon/pen/dwAIo

[toluolus]

Спасибо, тоже интересный вариант

Answer 3

[Виталий Желтяков]

По-моему, проблема в том, что Вы пытаетесь сверстать таблицу блоками.