• 0
shencoff

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

Вопрос

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

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

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

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

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

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

 

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

h_1520852004_4314564_5ddbd01d2e.png

Изменено пользователем shencoff

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

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

h_1520864602_4924014_55107ebb64.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
13 часов назад, Нарек сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас