Как подружить float с max-width?

Question

[Роман Родионов]

Есть враппер шириной 400px и 2 блока в нем.
1 - статичный, шириной 200px.
2 - плавающий( float: right ), с минимальной шириной 100px, максимальной 200px.
Как сделать, чтобы при уменьшении ширины враппера, 2-ой блок уменьшал свою ширину, а не переносился на другую строку?
codepen.io/RRodionov/pen/rxOYba

Answer 1

[Андрей Федоров]

Дайте резиновому блоку
width: calc(100% - 200px);

Comments

[Роман Родионов]

На сколько я знаю, на андроиде не будет работать.

[Андрей Федоров]

Роман Родионов: Ну не во всех андроидах, а только младше 4.4.4 и только в android browser...

[Роман Родионов]

Вы пользуетесь этим в повседневной работе?

[Андрей Федоров]

Постоянно.

[Дмитрий Королёв]

Андрей Федоров: ну и очень зря. caniuse.com/#feat=calc

[Андрей Федоров]

Дмитрий Королёв: Зависит от требований. Поддержка устаревших браузеров конечно будет стоить дороже для конечного заказчика.

[Дмитрий Королёв]

Андрей Федоров: что это за заказчик такой, которого не волнует 20 процентов пользователей?

[Андрей Федоров]

Дмитрий Королёв: Омг. ) Откуда 20% вы взяли? По моим проектам android-browser - это около 1% в среднем.

[Дмитрий Королёв]

Андрей Федоров: Андрей, я поражен. Я же дал ссылку на caniuse. Вы ни разу не сталкивались с этим ресурсом? Там сверху справа написано, какой на данный момент имеется процент поддержки у той или иной фичи. У calc - 81 процент, из которых у почти 20 процентов в браузерах есть с ним проблемы. Таким образом, браузеры 19 процентов ваших посетителей не увидят это свойство, и с еще 20 нужно быть максимально осторожным, чтобы не напороться на баг.

[Андрей Федоров]

Дмитрий Королёв: Это я поражен. Вы ссылку то дали, но не понимаете что означают цифры которые он приводит. Если нажмете на кнопку show all то увидите, что в 19% входят крайне древние версии браузеров. Вы мне предлагаете поддерживать ie6, ff2, chrome4 и т.п.?

Далее... Адекватного заказчика не волнует технология ради технологии. Его волнуют клиенты, т.е. в первом приближении посетители. И бюджеты на их привлечение. Допустим у какого-то гипотетического проекта есть маркетинговый бюджет 100000 рублей в месяц. Всего с этим бюджетом приходит 10000 посетителей за месяц. Т.е. один посетитель стоит 10 рублей. 1% из 10000 посетителей - это пользователи android browser, ie6 и тому подобного, т.е. 100 человек. Т.е. 1000 рублей из бюджета тратится впустую (на самом деле это не совсем так, но допустим что впустую). Вы как адекватный веб-разработчик возьметесь допиливать действующий проект под поддержку старыми браузерами за 1000 рублей? Полагаю ответ очевиден.

Но допустим бизнес все же решил допиливать эту поддержку. Конверсия у проекта 2% (к примеру), т.е. из 100000, 200 посетителей становятся клиентами. Т.е. из 100 олдскульных пользователей 2 могли бы стать клиентами. Посмотрим на ARPU - выручка на одного клиента. Тут зависит от проекта, но очевидно, если ARPU помноженное на конверсию превышает зарплату веб-разработчика, то решение бизнеса ошибочно, т.к. приносит убытки.

И наконец, допустим, что ARPU достаточно высок, чтобы покрыть расходы на допиливание - т.е. клиенты высокоплатежеспособны. Может ли быть у таких клиентов устаревший android browser в телефоне? Маловероятно, скорее всего там наисвежайший safari.

Другими словами при низкой цене продукта, который реализует бизнес - допиливание нерентабельно, при высокой - в нем нет необходимости.

[Дмитрий Королёв]

Андрей Федоров: какая нафиг разница, какие браузеры входят в эти 19%? Это не просто 19%, это 19% посетителей, это одна пятая от всех! Одна пятая!

[Андрей Федоров]

Дмитрий Королёв: А наплевать.

Answer 2

[IceJOKER]

указать размер в процентах , либо media queries;

resources.sameerast.com/responsive-web-design-form... - с помощью данного калькулятора можете вычислить размеры в %%%