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

298
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>

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

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

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

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

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

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

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

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

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

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

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

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

 385