Настройка ширины блока div.

[shencoff]

Прошу помощи. 

Есть блок div (красный) у него установлен параметр width: 47%

Есть блок div (зеленый) у него задан параметр float: right, параметр width - не задан.

При этом, второй блок (зеленый) не хочет принимать ширину на все оставшееся пространство (т.е. оставшиеся 53%). Не могу понять почему.

Скриншоты прилагаю.

Заранее благодарю за помощь.

 

при увеличении нужного блока параметром width: 50% он уходит вниз. а вообще, хотелось бы, чтобы блок автоматически распостранялся по ширине на оставшееся свободное пространство.

Edited March 12, 2018 by shencoff

[Нарек]

float элементы должны идти первым в разметке.

[Switch74]

без width он будет шириной по контенту

[shencoff]

Только что, Switch74 сказал:

без width он будет шириной по контенту

понятно. а как разобраться почему он сползает вниз при добавлении ширины в 50% , при этом там свободных 53%....??

[Switch74]

border margin padding не входят в width и если они у вас отличны от нуля, то ширина блока получается 53%+margin+border+padding, а это больше ваших 53%
если вы будете использовать box-sizing:border-box, то 53%+margin

[shencoff]

да нет. к сожалению проблема не в этом.

но на всякий случай использовал box-sizing:border-box - не помогло.

на скриншоте видно. даже до 45% блок уменьшил, видно что место есть, а он едет вниз ((((

[shencoff]

13 часов назад, Нарек сказал:

float элементы должны идти первым в разметке.

Спасибо за наводку.

одновременно два блока div обтекали справа один и тот же блок и мешали друг друг. Вложил оба в один общий - все заработало как следует.

Еще раз спасибо за подсказку.