css блок вымещает блок

264

15 декабря 2017, 01:19

Привет. У меня возникла такая проблема.

Вот. есть блок 1 и блок 2. Вроде всё нормально, но при ресайзе происходит вот такое:

Вот css

/*блок 1*/ 
.manga{ 
	border-radius:5px; 
	width:82%; 
	 
	float:left; 
	  
	border: 1px black solid; 
} 
/*блок 2*/ 
.user{ 
	    
	   float:right; 
	 
}

Answer 1

Не рекомендуется использовать float в 2017 году, если в этом нет необходимости, например из-за поддержки старых браузеров.

div { 
  min-height: 50vh; 
  box-sizing: border-box; 
} 
 
 
/*блок 1*/ 
 
.manga { 
  border-radius: 5px; 
  width: 82%; 
  float: left; 
  border: 1px black solid; 
} 
 
 
/*блок 2*/ 
 
.user { 
  width: 18%; 
  float: right; 
  border: 1px black solid; 
}

<div class="user"></div> 
<div class="manga"></div>

Answer 2

Чем регулируется ширина блока справа? Если у него фиксированная ширина (например, определяемая его содержимым), то блоки в какой-то момент перестанут помещаться в ширину родителя.

Вот так:

div { 
  border: 1px black solid; 
  height: 100px; 
  box-sizing: border-box; 
} 
 
.manga { 
  border-radius: 5px; 
  width: calc(100% - 150px); 
  float: left; 
} 
 
 
/*блок 2*/ 
 
.user { 
  float: right; 
  width: 150px; 
}

<div class="manga"></div> 
<div class="user"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Цвет SVG бекграунда

Вставляю маскировку в CSS вот так:

246

CSS

Модальное окно fancybox относительно родителя

Привет, не получается реализовать открытие модального окна fancybox в том div, в котором оно собственно и располагаетсяПо дефолту модальное окно...

258

CSS

Как при нажатии кнопки получить блок div?

Как сделать так, чтобы при нажатии на "кнопку" на сайте под кнопкой появлялся блок DiV с готовым текстом каким-либо?

346

CSS

Подпрыгивает меню

Пытаюсь зафиксировать отдельный элемент на странице при прокрутке страницыИспользую js код:

334