colonnes factices : centrer verticalement les DIV

**sebhm** · 17/02/2009, 11h22

Bonjour,

dans un autre Post, vous m'avez aidé à créer 3 blocs côte à côte, de meme hauteur, c'est à dire 3 colonnes factices car les bordures sont 'simulées' par une image :

Envoyé par sebhm

Code :

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

1
2
3
4
5
6
7
8
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <img id="separ1" src="img/brdc.png" alt="séparation" />
  <div id="bloc2">BLOC2<br />BLOC2</div>
  <img id="separ2" src="img/brdc.png" alt="séparation" />
  <div id="bloc3">BLOC3</div>
  <hr class="antifloat" />
</div>

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
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
  border : 1px solid black;
}
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
}
div#bloc2 {
  margin : 0 ;
  float : left;
  width : 22%;
  border : 1px solid black;
}
div#bloc3 {
  margin : 0 ;
  margin-left : 52%;
  border : 1px solid black;
  width : 22%;
}
hr.antifloat {
  visibility : hidden;
	clear : both;
}
 
#separ1 {
  position : absolute;
  top : 0;
  left : 20%;
  width : 4px;
  height : 100%;
  }
#separ2 {
  position : absolute;
  top : 0;
  left : 52%;
  width : 4px;
  height : 100%;
  }

le CLEAR est nécessaire pour que le bloc 'conteneur' ait la bonne hauteur.

je voudrais maintenant centrer verticalement le contenu de chacune de mes colonnes
(la colonne la plus haute ne va pas bouger car c'est elle qui détermine la hauteur de mes autre colonnes, mais je voudrais centrer verticalement le texte qu'il y a dans les 2 autres).

Ce n'est pas évident car mes colonnes n'ont en fait pas la meme hauteur. Si une colonne ne contient qu'une seule ligne, sa hauteur = une ligne.

Pour le constater, il faut modifier le CSS en ajoutant une bordure par exemple autour du bloc 1:

Code :

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

1
2
3
4
5
6
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
  border : 1px solid red;
}

Donc, je ne pense pas qu'il faille centrer verticalement le contenu de chaque bloc mais plutot centrer verticalement le bloc lui meme dans le 'conteneur'
(je pense mais je peux me tromper...)

j'ai essayé de modifier les propriétés d'affichage de mon bloc 'conteneur' en faisant :

Code :

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

1
2
3
4
5
6
7
8
9
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
  border : 1px solid black;
 
  display:table-cell; 
  vertical-align:middle;
}

ce qui aurait du faire basculer le mode d'affichage du bloc conteneur en 'mode Table', ce qui permettrait de centrer verticalement le contenu...
Ca ne marche pas et pire, ca explose mon affichage...

une idée ??

merci

**Macmillenium** · 17/02/2009, 11h37

Bonjour,

Inspire toi de ce topic

**sebhm** · 17/02/2009, 12h36

OK sous Firefox mais KO sous IE7
(j'ose meme pas imaginer IE6..)

je fais

Code :

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

1
2
3
4
5
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <div id="bloc2">BLOC2<br />BLOC2</div>
  <div id="bloc3">BLOC3</div>
</div>

avec 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
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
	border : 1px solid black;
	display:table;
	width : 100%;
}
div#bloc1 {
  margin : 0 ;
  width : 30%;
	display:table-cell;
	border : 1px solid red;
	vertical-align:middle;
}
div#bloc2 {
  margin : 0 ;
  width : 50%;
	display:table-cell;
	border : 1px solid blue;
	vertical-align:middle;
}
div#bloc3 {
  margin : 0 ;
	display:table-cell;
  width : 20%;
	border : 1px solid green;
	vertical-align:middle;
}

Sous IE, les blocs apparaissent les uns au dessous des autres ...??

et si j'applique un float, alors là c'est le marasme.
IE affiche alors les DIV sur la meme ligne... mais rien n'est centré verticalement.
Firefox perd le centrage vertical, et semble calculer différemment les tailles des div .... ??

**Macmillenium** · 17/02/2009, 12h51

Et si tu essai :

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
 
div#bloc1, div#bloc2, div#bloc3 {
	margin : 0 ;
	width : 30%;
        display:-moz-inline-box;
	display:inline-block;
	border : 1px solid red;
	vertical-align:middle;
}
div#bloc2 {
	width : 50%;
	border : 1px solid blue;
}
 
div#bloc3 {
	width : 20%;
	border : 1px solid green;
}

?

**desert** · 17/02/2009, 13h56

Ils se mettent l'un en-dessous de l'autre car IE gère pas le display:table-cell.
Mais pour ce que tu demandes, à part utiliser une table, je ne vois pas vraiment de solution.