Есть код в котором есть класс circle_img?

Question

[Василий]

<div class="container">
 		<div class="circle_img"></div>
 		<div class="column col-1">
 			<p>
 				Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Asperiores, nostrum, dolorum! Necessitatibus, soluta quas dolores maxime delectus 
facere nesciunt exercitationem facilis labore consequatur temporibus, eius. Sint, unde, consectetur! Ducimus, aspernatur.
 				Veniam, quod obcaecati consequatur 
laudantium sequi modi amet repudiandae minima, molestias hic commodi 
nihil sit placeat, facere velit doloribus optio illo magnam vitae voluptatum praesentium.
 Temporibus quod eos dolorum tenetur.
 			</p>
 		</div>
 		<div class="column col-2">
 			<img src="https://resheto.net/images/mater/kartinka_motivatsiya_tsitata_9.jpg" alt="" class="imj">
 		</div>
 	</div>

Это код блока

column {
	box-sizing: border-box;
	float: left;
	width: 50%;
}
.col-1 {
	border-right: 1px solid;
	padding-right: 20px;
}
.col-2 {
	border-left: 1px solid #000;
	margin-left: -1px;
	padding-left: 20px;
}
.column p:first-child {
	margin-top: 0;
}
.imj {
	width: 450px;
	height: 350px;
}
 .circle_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  width: 46px;
  height: 46px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

Это стили, и когда код блока повторяешь, то класс circle_img почему то не повторяется а фиксируется только вверху

Answer 1

[Рома Зварич]

Основная причина проблемы — использование в CSS свойства `float: left` для выравнивания элементов в одну строку.
Это метод не предназначался для использования в таком виде и применялся из-за отсутствия других способов.
Из-за этого свойства элемент `.container` схлопывается по высоте и при повторении абсолютно позиционированный "кружок" накладывается на такой же кружок предыдущего контейнера.

Решение:
1. Отказаться от использования CSS-свойства float: left для элементов .column
2. Вместо него использовать современный способ выравнивания элементов в строку — свойство display: flex для родительского элемента .container

.container {
  display: flex;
}

3. Для него же следует задать относительное позиционирование, чтобы "кружок" ориентировался именно на этот элемент

.container {
  position: relative;
  display: flex;
}

Результат в Codepen:
Ссылка