Bonjour à tous,

J'ai un problème de div imbriqués que je ne comprends pas - la colonne de droite se place systématiquement sous la fin de la colonne de gauche, alors que je souhaite qu'elles soient collées entre elles, alignées horizontalement.

Pouvez-vous m'aider svp?

voici le css:
Code : 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.etapes_blocTexte { //conteneur principal
width: 100%;
height: 100%;
vertical-align:top;
display: block;
border: 1px solid black;
}
 
.etapes_imgTexte{ // colonne de gauche
display: inline-block;
float:left;
width: 190px;
border: 1px solid black;
}
 
.etapes_ctnTexte{  // colonne de droite - conteneur
float: left;
display: inline-block;
border: 1px solid black;
}
 
.etapes_titreTexte {
float: left;
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 700;
color: #2D241E;
display: inline-block;
border: 1px solid black;
}
 
.etapes_contentTexte{
float: left;
display: inline-block;
border: 1px solid black;
}
et le html
Code html : 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
<div id="etapes_blocTexte" class="etapes_blocTexte"> //conteneur principal
<div style="clear:both;"></div>
 
<div class="etapes_imgTexte" id="etapes_imgTexte"> // colonne de gauche
<img src="...">
</div>
 
<div class="etapes_ctnTexte" id="etapes_ctnTexte"> // colonne de droite - conteneur
<div style="clear:both;"></div>
 
<div class="etapes_titreTexte" id="etapes_titreTexte">Titre</div>
<div class="etapes_contentTexte" id="etapes_contentTexte">Texte sur plusieurs lignes.</div>
 
<div style="clear:both;"></div>
</div>
 
<div style="clear:both;"></div>
</div>