[Résolu] Positionnement des floats

Bonjour,

Dans le cadre d'un projet que je devrais utiliser tout au long de ma formation, je dois réaliser un site vitrine. Je bloque actuellement sur un petit écueil. Sur une de mes pages, se trouve une image en float left, un texte en float right suivi d'un aside en float right, le tout dans une section. Le problème est qu'avec mon code actuel, lorsque l'on réduit la page, le texte vient déborder sur l'image. Voici la portion du code HTML concerné :

<section class="auto">
												 
							<figure class="figleft">
							
								<img src="Img/Decks/Darklord.png" alt="Deck Ange Déchu">
			
							</figure>
													
							<h4 class="HowPlay">Fonctionnement</h4>
							
								<p class="right">L'ange Déchu Sanctifié ne cible pas. Ceci est utile dans de nombreuses
								situations (comme contre Rouages Anciens avec une Forteresse), mais signifie
								également que Affrontement de l'Héritage du Monde peut potentiellement vous 
								forcer à annuler l'effet de l'un de vos propres monstres si l'adversaire bannit
								son seul monstre.
								Copier L'effet de L'Ange Déchu Sanctifié pour annuler l'effet du monstre
								qui le copie provoquera toujours un gain de LP et remettra la carte dans le deck.
								Ange Déchu Superbia marquera un <a href="lexique.html#misstiming" title="définition">misstiming</a> 
								s'il est invoqué par un Ange Déchu Contact copié par l'effet d'une carte.
								Les effets copiés des cartes sort / piège sont traités comme des effets de monstre, ce qui signifie que Lance Interdite
								ne protégera pas un monstre d'être annulé par un Ange Déchu Sanctifié copié.
								Tous les effets de copie des Anges Déchus sont limités à une fois par tour 
								et de nombreux monstres ne peuvent être invoqué par l'effet de l'Ange Déchu &Eacute;toile du Matin.</p>
							
						
						
						<aside>
						
							<h4 class="HowPlay">Taux de présence des cartes.</h4>
							
								<ul>
								
									<li>Ange Déchu Désir : 1x dans 88.8% des decks.</li>
									<li>Ange Déchu Ukobak : 1x dans 88% des decks.</li>
									<li>Cyclone Cosmique : 2x dans 65% des decks.</li>
									<li>Ange Déchu Tezcatlipoca : 1x dans 62% des decks.</li>
									<li>Ange Déchu Nasten : 3x dans 54% des decks.</li>
									<li>Ange Déchu &Eacute;toile du Matin : 1x dans 50% des decks.</li>
								
								</ul>
						
							<h4 class="HowPlay">Popularité des compétences</h4>
							
								<ul>
								
									<li>Un Lien puissant dans 50% des decks.</li>
									<li>Pioche de la Destinée dans 35% des decks.</li>
									<li>Compensation dans 12% des Decks.</li>
								
								</ul>
								
							<h4 class="HowPlay">Side Deck Possible</h4>
														
								<img src="Img/Side/sidedarklord.png" class="adjust" title="exemple de side">
					
								<p>Compétence de side : Armée Posthume</p>
								
						</aside>
						
					</section>

Et voici le code CSS correspondant à cette portion :

.figleft
{
float:left;
}
.right
{
float:right;
margin-left:40%;
margin-right:30%;
position:absolute;
}
.HowPlay
{
text-align:center;
color:darkolivegreen;
}
.clear
{
clear:both;
}
aside
{
float:right;
border:solid black 1px;
width: 25%;
}
.adjust
{
width:100%;
opacity:1;
}

J'ai entendu parler des propriétés overflow mais je n'arrive pas à les appliquer, de plus lorsque je n'utilise plus la position absolute sur le paragraphe, celui-ci vient se positionner en-dessous, ce que je ne souhaite pas évidemment. Si quelqu'un pouvait me mettre sur la voie.....

Salut

il vient débordé sur l'image car il a un position: absolute;

Tu peux également modifié ta classe .right par :

.right {
    float: left;
    width: 25%;
    /* margin-left: 40%; */
    /* margin-right: 30%; */
    /* position: absolute; */
    /* display: block; */
} 

Modifié par JENCAL (28 Oct 2019 - 12:10)

Merci beaucoup, effectivement celà fonctionne, je marque le sujet comme résolu.