Discussion :

[roukgreg]

Bonjour,

Je cherche à réaliser une partie d'un site contenant 3 DIV alignées. Jusque là pas trop de souci, mes 3 DIV sont bien alignées, mais lorsque je mets du contenu de l'une d'elle, les 2 autres de décalent vers le bas.

Comment pourrais je faire pour que mes DIV ne bouge pas, peu importe ce qu'il y a dedans.

Voici mon code si ça peux vous aider :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div id="main">	
	<!-- BLOC Génréal contenant l'ensemble du site de la partie centrale -->
	<div class="divGeneral">
		<div class="partieHaute">
			<div class="partieSite">
				haut 1
			</div>
 
			<div class="partieSite">
				haut 2
			</div>
 
			<div class="partieSite">
				haut 3
			</div>
		</div>
 
		<div class="partieCentrale">
			<div class="partieSite">
				centre 1
			</div>
 
			<div class="partieSite">
				<img src="./images/qui/quid1.jpg" width="50px" height="50px">
			</div>
 
			<div class="partieSite">
				centre 3
			</div>
		</div>
 
		<div class="partieBasse">
			<div class="partieSite">
				bas 1
			</div>
 
			<div class="partieSite">
				bas 2
			</div>
 
			<div class="partieSite">
				bas 3
			</div>
		</div>
	</div>
</div>

et voici mon 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#main {
	display: inline-block;	
	background-color:#E6E6E6;
	width :80%;
	height:99%;
	overflow:hidden;
	/*HACK IE*/
	*zoom: 1;
	*display:inline;
 
}
 
.divGeneral {
	width:99%;
	height:99%;
border:1px solid red;
}
 
.partieHaute {
	width:100%;
	height:33%;
border:1px solid blue;
}
 
.partieCentrale {
	width:100%;
	height:33%;
border:1px solid blue;
}
 
.menuLosange {
	width:50px;
	height:50px;
}
 
.menuLosange img {
	width:20px;
	height:20px;
}
 
.partieBasse {
	width:100%;
	height:33%;
border:1px solid blue;
}
 
 
.partieSite {
	width:30%;
	height:100%;
	display:inline-block;
	   zoom:1; /* IE 7 Hack starts here*/
    *display:inline;
border:1px solid black;
}

Je n'arrive pas à les aligner, et qu'elle ne bougent pas peu importe ce que l'on mets à l'intérieur.

Auriez vous une idée?

Par avance merci

[CCyrillus]

si tu formate tes block en boite en ligne , ils reposent alors sur la même ligne (baseline) comme des images , il te faut modifier leur alignement vertical respectif, c'est à dire ajouter à display la règle :

Code :

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

vertical-align:top;

http://codepen.io/anon/pen/hqFKl
++

[roukgreg]

Je te remercie pour ta réponse, mes 3 blocs sont correctement placés.

Maintenant il faut que je m'attèle à mon autre problème mais ça c'est un autre sujet.

Merci encore pour ta réponse