Display: table-cell à la place de float

Bonjour,


J'avais 2 colonnes, avec un float left et un float right, et je voulais que ma colonne de gauche soit toujours à une largeur de 200px et ma colonne de droite adaptable... mais ça ne marchait pas puisque tôt au tard quand la largeur de l'écran diminue, la colonne de droite passe en dessous de la colonne gauche.

J'ai alors appliqué display: table-cell à mes 2 colonnes et j'ai enlevé le float, du coups je n'ai plus aucun problème et du coups je n'applique plus de largeur à ma colonne de droite, et elle s'adapte parfaitement.

Est-ce une bonne manière de faire ?

Bonsoir,

display: table-cell a de nombreux avantages, tous ceux du rendu tabulaire : les éléments restent dans le flux, le centrage vertical est aisé, deux frères auront la même hauteur, etc.

Leur seul inconvénient (ou presque) est que ce mode de rendu n'est pas compris par les anciennes versions d'Internet Explorer (IE6 et IE7)

EDIT : quelques possibilités de table layout : http://www.ie7nomore.com/#CSS2
Modifié par Raphael (31 Aug 2012 - 22:55)

Bonsoir,


Ah d'accord merci. Et le fait de ne pas attribuer de largeur au bloc, c'est pas grave ?

Pour IE 6 et 7 j'ai quand même mis le float... tant pis j'ai envie de dire ^^ Je vais jeter un oeil à ces tables layout !

C'est exactement ça : http://www.ie7nomore.com/fun/tablemobile/ sans tableau !

Dommage que le site soit en anglais


Merci
Modifié par Crousti2 (31 Aug 2012 - 23:19)