Не могу сверстать 2 дива горизонтально, чтоб 2й был "резиновым"
Приветствую всех!
Уже битый день не могу сверстать, чтоб 2 дива были горизонтально, с некоторыми условиями. Может кто сможет помочь?
Приведенный html приведен просто для наглядности задачи. Переверстать можно и на дивах и на table и на ul - не принципильно. Лишь бы работало.
В реальной верстке марджин и цветных бордеров нет. Они в примере приведены просто для наглядности.
Итак условия:
- левый синий див не имеет фиксированной ширины/высоты, то есть из-за его содержимого он может менять как свою высоту так и ширину. Но они точно не больше 50% экрана.
- правый зеленый див должен занимать оставшуюся правую часть не вылезая за экран вправо.
- он же (правый зеленый див) не имеет фиксированной высоты, так как при длинном тексте должен быть перенос на новую строку и див будет увеличиваться в по высоте
- верхние грани синего и зеленого дива прижаты вверх к красному контейнеру
- высота красного контейнера должна быть максимальной из двух высот внутренних дивов
- (Самое сложное). Внутренний текст в правом зеленном диве потенциально может быть очень длинным и не иметь пробелов! ))