Table-cell : écrasement horizontal du div

Bonjour.
Pourquoi, quand j'applique "display: table-cell;" à un <div>, celui-ci s'écrase-t-il horizontalement ? J'ai beau préciser "width: 100%" ; ça ne change rien.
Comment éviter ce problème ?
Merci.
PS : si j'ai mis "display: table-cell;", c'est que je voudrais utiliser "vertical-align: middle;"
Modifié par Piteur511 (20 Mar 2010 - 13:51)

Piteur511 a écrit :
Pourquoi, quand j'applique "display: table-cell;" à un <div>, celui-ci s'écrase-t-il horizontalement ?

Alors en détail:
1. tu as une série avec un seul élément en display:table-cell;
2. le navigateur va créer un conteneur «fictif» en display:table autour de ton élément en display:table-cell;
3. ce conteneur se comporte comme un tableau, c'est à dire qu'il prend la largeur de son contenu sauf s'il est en table-layout:fixed (pas le cas par défaut) ou s'il a une largeur explicite (width avec une valeur autre que "auto", ce qui n'est pas le cas par défaut);
4. tu ne peux pas contrôler directement ce conteneur en CSS;
5. ton DIV en display:table-cell prend 100% de la largeur de ce conteneur fictif, comme le ferait une cellule de tableau dans un tableau à une seule cellule, et si tu déclares explicitement un width:100% ça n'obligera pas pour autant le parent fictif à prendre toute la largeur du conteneur.

Deux solutions:
1. Déclarer une largeur en pixels pour ton DIV en display:table-cell.
2. Ou bien avoir deux éléments imbriqués, le premier avec display: table; width: 100%;, et le deuxième avec display: table-cell; vertical-align: middle;. La hauteur dans laquelle tu veux centrer ton contenu peut être attribuée soit au «tableau», soit à la «cellule» (et on notera que, comme pour un tableau, elle agit comme une hauteur minimale et non pas une hauteur fixe).

Florent V. a écrit :

(...)

Deux solutions:
1. Déclarer une largeur en pixels pour ton DIV en display:table-cell.
2. Ou bien avoir deux éléments imbriqués, le premier avec display: table; width: 100%;, et le deuxième avec display: table-cell; vertical-align: middle;. La hauteur dans laquelle tu veux centrer ton contenu peut être attribuée soit au «tableau», soit à la «cellule» (et on notera que, comme pour un tableau, elle agit comme une hauteur minimale et non pas une hauteur fixe).

Limpide ! Merci beaucoup ! http://forum.alsacreations.com/smilies/smile.gif