Mise en page avec float

**moimp** · 13/10/2023, 14h19

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Archimède** · 14/10/2023, 13h47

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

  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...

**moimp** · 16/10/2023, 16h50

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.

Mise en page avec float

CSS

Vue hybride

Discussions similaires

Partager

Partager