Mise en page avec float

Version imprimable

Bonjour,
Je veux mettre une image à gauche de son conteneur avec float et l'encadrer avec du texte.
Malheureusement, l'image se place en-dessous complètement à gauche de la page au lieu de se placer à gauche de son conteneur.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body> <div class="mainSection"> <div id="left"> <nav class="mainNav">  </nav>  </div> <div id="right"> <img src="book.jpg" alt="book.jpg" class="floatLeft"> <p>du texte</p> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .mainSection { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:start; } .floatLeft { float:left; margin-right:10px; margin-bottom:5px; } #right { margin:0; max-width:90%; }
EDIT: J'ai essayé de jouer avec les propriétés css position mais je n'y parviens pas.

14/10/2023, 12h47
Archimède

Code:

flex-wrap: nowrap;

C'est lié à la trop grande largeur de ta photo.
Tu as un retour à la ligne de ta div right par manque de place : la largeur du conteneur est dépassée. avec nowrap, tu n'auras plus le retour à la ligne mais une partie sera cachée...
16/10/2023, 15h50
moimp

Bonjour et merci.
Tout fonctionne pour la page concernée mais ce qui m'ennuie c'est que je vais être obligé de différencier mon CSS avec des classes différentes selon les pages.