R45H

Буду очень благодарен, если вы мне подскажите, как можно решить проблему. Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff. Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности. Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок. Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет). Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме: - пропорциональное уменьшение картинок; - блоки с синей обводкой растягиваются на всю оставшуюся высоту; - голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста); - на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере). Заранее спасибо за помощь.

Я в body создал div, задал ему ширину 900px и выровнял по центру, задав margin слева и справа auto. Ещё добавил text-align по левому краю. Сайт корректно отображается на всех разрешениях, но если у человека 1920х1080, этот div почему-то съезжает вправо так, что левый край находится по центру экрана. Вижу я это через вебвизор яндекса. В чём может быть дело?

Решил проблему. Всем спасибо. Я просто забыл отменить действие float, т.е. задать свойство clear: both.

Ребят, помогите с сайтом. К сожалению поздно додумался проверить его во всех браузерах, в итоге не могу разобраться в чём проблема. Сайт небольшой, писал его в Dreamweaver. По сути это таблица из двух столбцов, в левом лого (с параметром position: absolute), ниже форма заявки. А в правом контент. Ниже этой таблицы футер. На фоне этой таблицы шаблон картинки, которую я потом поменяю. Проблема в том, что в IE (11) и Firefox содержимое левого столбца смещается ниже таблицы. И я не допёр почему. Вот архив с сайтом.