Discussion :

[yves51]

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>

[kevin254kl]

Bonjour, logique pour le css de ta colonne de droite tu mets left au lieu de right pour le positionner à droite dans ton float.

[yves51]

J'ai testé cela ne change rien, le problème est toujours la...

[copin]

Salut,

Je suis pas sur d'avoir bien compris ce que tu souhaites...

Essaie ca.

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
38
39
40
41
42
.etapes_blocTexte { 
width: 100%;
height: 100%;
vertical-align:top;
display: block;
border: 1px solid black;
}
 
.etapes_imgTexte{ 
 
float:left;
width: 190px;
border: 1px solid black;
}
 
.etapes_ctnTexte{ 
float: left;
 
border: 1px solid black;
height:20px; 
 
display:block; 
}
 
.etapes_titreTexte {
float: left;
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 700;
color: #2D241E;
 
height:20px; 
display:block;
border: 1px solid black;
}
 
.etapes_contentTexte{
float: left;
 
border: 1px solid black;
}

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">
 
 
    <div class="etapes_imgTexte" id="etapes_imgTexte"> 
    <img src="...">
    </div>
 
	<div class="etapes_ctnTexte" id="etapes_ctnTexte">
 
 
            <div class="etapes_titreTexte" id="etapes_titreTexte">Titre</div>
            <div class="etapes_contentTexte" id="etapes_contentTexte">Texte sur plusieurs lignes.</div>
 
 
	</div>
 
 
</div>

Soit dis en passant, la multiplication des <div style="clear:both;"></div> ne facilite pas la lecture de ton code.
La multiplication des balises div n'aide pas non plus. Pourquoi ne pas utiliser des balises naturelles? (p, h1, etc etc ...)

[Invité]

Bonjour,

avant de t'aventurer dans une contrée que tu ne connais manifestement pas, il faut absolument que tu apprennes les bases de la survie :

• HTML5 : le guide du débutant
• Les meilleurs cours et tutoriels CSS
• Glossaire des propriétés CSS
• Div et CSS : une mise en page rapide et facile

Rappel du principe KISS : si ça devient trop (inutilement) complexe, c'est qu'on n'est plus sur la bonne voie...

[miss_socrates]

Voici déjà certaines corrections; maintenant, il faut voir si le contenu des colonnes n'est pas trop large auquel cas la dernière colonne sera automatiquement rejetée après les précédentes!

Le html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="etapes_blocTexte" style="width: 100%"> <!--Div qui va englober toutes les autres-->
 
         <div  id="etapes_imgTexte"> <!--colonne de gauche-->
                      <img src="..." />
         </div>
         <div id="etapes_ctnTexte"> <!--colonne de droite-->
                  <h1 id="etapes_titreTexte">Titre</h1>
                   <p id="etapes_contentTexte">Texte sur plusieurs lignes.</p>
         </div>  
</div>

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
38
39
 
#etapes_blocTexte{ /* div conteneur */
width: 1024px;
height: 100%;
margin: 0 auto;
display: inline;
border: 1px solid black;
padding: 0;
}
 
#etapes_imgTexte{ /* colonne de gauche */
display: inline;
float:left;
width: 20 %;
border: 1px solid black;
margin: 10px;
}
 
#etapes_ctnTexte{  /* colonne de droite */
float: left;
display: inline;
border: 1px solid black;
margin: 10px;
}
 
#etapes_titreTexte {
padding: 10px;
font-size: 24px;
font-weight: 700;
color: #2D241E;
border: 1px solid black;
text-decoration: underline;
text-align: center;
}
 
#etapes_contentTexte{
font-size: 12px;
padding: 10px;
}