Как сделать ризиновым блок с картинкой сжимаемый соседним блоком?

Question

[Николай]

Всем доброго дня!

Есть задача оформить информационный блок таким образом, что бы блок справа был фиксированной ширины, и если разрешение не позволяет ему поместиться, то должен пропорционально уменьшаться блок с картинкой слева, при этом контейнер этих блоков должен уменьшаться по высоте в след за уменьшением высоты блока с картинкой...

Вот код - https://jsfiddle.net/0bL08r2d/

И так и сяк крутил, не могу этого добиться. блок справа выдавливается вниз...
Левый блок начинает уменьшаться только когда сам не помещается в экран...

Заранее благодарен!

Answer 1

[Полина Емельянова]

Добрый день.)

Флекс бокс к вашим услугам.
https://jsfiddle.net/bugo_aneo/5psLzp5p/

Не хотите ФБоксы - прошу старый добрый флоат. Допилите напильником.))) Если что - пишите помогу.)
https://jsfiddle.net/bugo_aneo/dh6tdmL3/

V 2 - Презираю Фиддл всей душой... Ничерта у него не ясно.

Во втором случае работает хак с calc()

Николай - поклон в пояс. Мои извинения за путаницу.

Comments

[Николай]

Полина, это Вам спасибо огромное! :)

Answer 2

[Николай]

Чувствую себя динозавром.
Про флексбокс услышал год назад, с комментариями что пока не до конца всеми поддерживается, не стал эксперементировать.

Кстати по ссылке под float элементами как раз флексбокс, а по ссылке под флексбокс код без правок :)
Только вот сомнения у меня по поводу float, там же у блоков непонятки с определением высоты нацинаются, соответственно родительский не отыграет как нужно...
По-крайней мере так у меня и было, и было, изначально делал через float, потом переделал в inline-block

Comments

[Полина Емельянова]

https://jsfiddle.net/bugo_aneo/dh6tdmL3/

Тут вот с флоатом.

У флоата самая большая проблема в контроле его ширины, на сомом деле.))) Calc() позволяет решить этот вопрос оптимально.

Эту же функцию можно применить и для инлайн блоков. Но я бы юзала ИБ там, где кровь из носу нужно вертикальное выравнивание. ИМХО! Ни к чему не призываю!

ЗЫ Поиграйте во Флекс Боксы Обязательно! Надеюсь вам понравиться.)))

Answer 3

[Полак Вершинский]

https://jsfiddle.net/88p3cvm1/ так