26851 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerai créer deux bloc en html / css. A gauche une image et à droit mon texte. Là il y a pas de souci j'y arrive. Je veux que mon image reste collé à droite en float là aussi pas de problème. Mon image est grande elle fait un peu près la moitié de la section.

Ce que j'arrive pas:

Quand je réduis ma page pour tester pour responsive mon texte passe en dessous de l'image .Ce ce que je veux c'est que le bloc texte reste stable et qu'il se réduit en fonction que la page se réduit avec mes medias queries.

Voici un exemple : https://hostmarked.dk/ (la deuxième section)

Et voici mon code

<section class="realisations clearfix">

	<div class="container-realisation ">

		<div class="description-realisation">

			<h3>Dernier projet</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
			<br>sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris <br> nisi ut aliquip ex ea commodo.</p>

		
		</div>

	</div>

	<div class="container-realisation">
		<img src="images/mon-image.png">
	</div>

	
</section>




.realisations{
margin: auto;
padding-bottom: 200px; 
}

.container-realisation{
float: right;
width: 50%;
}
Hello

Si tu veux que ton texte bloc reste stable, il faut positionner container-realisation en position absolue par rapport à son parent description-realisation positionné en relative. Faudra le mettre à l'intérieur du bloc parent et utiliser les media queries.
Meilleure solution
float a pour effet de sortir les éléments flottants du flux de la page, ils ne sont plus considérés comme étant du contenu "durs" mais "volants" (d'où le problème de superposition).

Je te conseille vivement de te renseigner sur la propriété "flexbox" qui te permet d'arriver au même résultat sans sortir quoique ce soit du flux de la page et sans utiliser de propriété de positionnement (absolute / relative). Moins de code, moins de contraintes, carrément plus de fun.

Tu peux jeter un oeil au comportement d'un élément en display: flex; via ce codepen : https://codepen.io/wollsale/pen/xQxYmW
Modifié par Wollsale (03 Nov 2018 - 17:50)