Problème de div qui se chevauchent

Bonsoir à tous !

Je vous contacte car j'ai un problème que je n'arrive pas à résoudre malgré des heures de bricolage et des recherches infructueuses...
Je crée ma première page en HTML/CSS et je dois créer des blocs placés l'un en dessous de l'autre, avec sur chacun des blocs des sous-blocs qui les chevauchent (titre, texte, images...). Ça marche très bien pour les premiers blocs pour le 3ème (appelé sous-partie 2) ça foire complètement et il chevauche le bloc 2 : http://www.noelshack.com/2019-01-5-1546560631-ex1.png
Voici mon code en HTML :

		<!--=================== sous-partie 1 ===================-->
		<div class="sous-partie-1" style="width:100%">
			<div class="places">
				<img src="upload/pin.png" alt="icone places">
				<h4>PLACES</h4>
				<p>
					Seamlessly empower fully researched growth strategies and interoperable sources.
				</p>
			</div>

			<div class="settings">
				<img src="upload/settings.png" alt="icone settings">
				<h4>SETTINGS</h4>
				<p>
					Collaboratively administrate turnkey channels whereas virtual e-tailers an other media.
				</p>
			</div>

			<div class="easy">
				<img src="upload/easy.png" alt="icone easy">
				<h4>EASY</h4>
				<p>
					Interactively procrastinate high-payoff content without backward-compatible data.
				</p>
			</div>
				
			<div class="global">
				<img src="upload/saturn.png" alt="icone global">
				<h4>GLOBAL</h4>
				<p>
					Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness
				</p>
			</div>
		</div>
		<br>

		<!--=================== sous-partie 2 ===================-->
		<div class="sous-partie2">
			<div class="sp2_titre">
				<h2>People talking about #MIMOStyle</h2>
			</div>
			<div class="sp2_texte">
				<p>Join our #MIMOStyle adventure. Meet up in London this saturday ! Spread the word and join for fun.</p>
			</div>
			<div class="spt_boutons">
				
			</div>
		</div>
		<br>

Et en CSS :

/*==================== sous-partie 1 ====================*/

.sous-partie-1
{
	position: relative;
	text-align: left;
	margin:5em 5px;
	height: auto;

}

.places
{
	position: absolute;
	border: 1px solid;
	top: 50%;
	left: 16px;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em
}

.settings
{
	position: absolute;
	top: 50%;
	left: 25%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
}

.easy
{
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
}

.global
{
	position: absolute;
	top: 50%;
	left: 75%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
	
}

/*==================== sous-partie 2 ====================*/

.sous-partie2
{
	position: relative;
	text-align: center;
	background-color: rgb(0, 172, 230);
	color: white;
	margin:50px 0px;
	height: auto;
}
.sp2_titre
{
	top: 50%;
}

.sp2_texte 
{
	top: 70%;
}

Voilà, je sais que les divs sont supposées allées à la lignes quand elles sont mises à la suite, et j'ai même mis des balises <br>, mais le chevauchement reste !
Côté CSS, j'ai mis aux blocs principaux une position: relative; et une position: absolute; aux sous-blocs qui vont se placer pardessus. Ça marche très bien pour l'entête et la sous-partie 1, je ne comprend pas pourquoi la sous-partie 2 se prend pour un sous-bloc de la sous-partie 1...

Bref, de l'aide me serait très utile à ce sujet ! Merci d'avance
Modifié par Yass-CLR (04 Jan 2019 - 01:38)

Bonjour,

C'est lequel le bloc 2 ?

Amicalement,

Bonjour,

Si l'on suppose que le bloc2 est l'ensemble "sous-partie 1", le problème provient du fait que le bloc principal de sous-partie 1 n'a pas de hauteur car il ne contient que des éléments en position absolute, qui sont donc sortis du flux et ne peuvent lui donner une hauteur.

Amicalement,