[Résolu] Colonnes hauteurs égales height:100% + div image centrée vert

Bonjour,

Je souhaite créer 3 div colonnes dans une div conteneur qui sert de "ligne" pour les 3 div précédentes.
- Les 3 div enfants doivent avoir la même hauteur : celle de la plus haute des 3 div enfants.
- L'une de ces div enfants contient une image qui doit être centrée verticalement.
- Le tout qui s'adapte à la hauteur non prédéterminée du contenu.

J'ai fait pas mal de tests pour y arriver et, miracle, je tiens le bon code :
une div-ligne (CSS .ligne) englobe 3 div-colonnes (CSS .lignecol et .col), qui ont chacune une div-inner

http://uppix.com/f-lulu528bddef00149b39.jpg
(sur ce screenshot on voit 2 lignes identiques de ces fameuses 3 colonnes, mais c'est pareil)

C'est parfait, grâce au CSS suivant :

.ligne	{ height:100%; display: table-cell; width: 100%; }
.lignecol	{ height:100% !important; min-height:100% !important; position: relative; }
.col .inner	{ height:100% !important; margin:0 !important; text-align: justify; position: relative; }
.col .inner img	{ width: 280px;margin: auto; position: absolute;  top: 0; left: 0; bottom: 0; right: 0;}

Alors, pourquoi c'est pas le bonheur ?
Parce que lorsque je copie/colle le HTML et le CSS dans mon Wordpress local, les div enfants ("colonnes") ne sont alors plus de la même hauteur (chacun adopte celle de son propre contenu au lieu de respecter le height:100% qui fonctionne en test).
De plus, la div-colonne de l'image est recouverte de la 2ème div-colonne enfant, car alors l'absolute de l'image (nécessaire au centrage vertical) fait ici tout foirer, contrairement au comportement dans la page de test.

Pourtant, j'ai tenté de verrouiller mes CSS avec des !importants à certains endroits stratégiques mais sans succès.
Auriez-vous des pistes au sujet de ces height:100% et absolute qui fonctionnent parfois mais pas toujours ?
Modifié par Zenen (19 Nov 2013 - 23:19)

Bonjour,

si tu ne te soucies pas d’IE7, je pense que display: table-cell te fera plaisir : Le modèle tabulaire en CSS.

Bonne continuation !

Bonjour, je te remercie de t'intéresser à mon problème.
Regarde la 1ère ligne de CSS, j'utilise déjà display: table-cell.

Il semble que les 2 problèmes que j'ai soient de toute autre nature.
Bonne continuation à toi aussi !

salut,
je crois que c'est beaucoup plus simple que tu ne l'as fait.

<div class="table">
	<div></div>
	<div></div>
	<div></div>
</div>

.table {display:table;table-layout:fixed;width:100%;}
.table>div {display:table-cell;vertical-align:middle;}

Tu mettras ton image et tes textes dans les <div> enfant de ".table". Il faudra faire attention à ce que l'image ne déborde pas en largeur.

Pas mal du tout, merci, ça résoud en effet le problème de l'image qui est recouverte dans Wordpress (à cause de l'absolute que j'utilisais).

J'ai toujours la difficulté de la hauteur égale des colonnes-enfants :

http://uppix.com/f-test_colonnes528cf8b800149cd9.jpg

J'ai mis une div .table-inner dans les colonnes de texte (2 et 3) pour mettre un fond distinct et des bords arrondis pour chaque colonne, et avec un height:100% !important; mais la 3ème colonne ne s'adapte pas mieux à la hauteur de la 2nde.

Une idée ?
Modifié par Zenen (20 Nov 2013 - 19:09)

Ce n'est pas la peine tu peux directement ajouter un "border-spacing:15px 0", par exemple, sur ".table" et appliquer les coins arrondies sur les <div> enfants directs de ce dernier.

.table {display:table;table-layout:fixed;border-spacing:15px 0;width:100%;}
.table>div {display:table-cell;vertical-align:middle;background:#e2f4f6;border-radius:10px;}

En outre, pour que ton "height:100%" marche, il faut aussi l'appliquer sur le div parent et le ".table" mais tu pourrais avoir de mauvaises surprises si les tailles sont établies en amont.

Effectivement, ta solution fonctionne, c'est cool.
Bon du coup le thème n'est plus responsive, y-a-t-il moyen de garder le responsive ?

Un truc que je comprends pas, c'est la largeur de ce Table, qui a un comportement difficile à maîtriser :
http://uppix.com/f-test_colonnes_2528d29c200149d8b.jpg
Sur la droite, on voit une marge plus importante que sur la gauche.
Pourtant quand je refais le calcul : j'ai 2 div texte de 260, une div image de 280, 4 spacings de 20, 4 paddings de 20, soit un total de 960px... et dans les faits, le table fait 980px de large ! Il y a une bordure de 20px qui se rajoute à droite. ???
(la largeur de mon conteneur de page est de 960px, donc le Table déborde de 20px à droite)

.table {display: table; table-layout: fixed; border-spacing: 20px; width: 100%; }
.table>div { width: 260px; text-align:justify; display:table-cell; padding: 20px; background:#e2f4f6; border-radius:7px; }
.table .colimg { width: 280px; background: none; vertical-align:middle; padding: 0px; }
.table .colimg img { width: 280px; }

Modifié par Zenen (20 Nov 2013 - 23:17)

En fait les calcules ne se passent pas comme ça. En "display:table-cell" quand tu spécifies des padding ces derniers sont déduits de la largeur préétablie. C'est le même comportement que lorsque tu passes un "box-sizing" à "border-box", les padding sont inclus dans la largeur de l'élément (i.e si tu appliques une largeur de 300px et un padding de 20px, l'élément fera toujours 300px de large).
Du coup dans le code que tu as donné, ton tableau fait 880px de large et non 960px. Il faut aussi savoir qu'avec le code que j'ai donné, les largeurs s'adaptent automatiquement sans spécifier de "width" et qu'avec un conteneur de 960px de large, les colonnes font environs 293.3333px de large [(960-20*4) / 3].

Alors dans la théorie tu as tout à fait raison : les padding sont inclus dans la largeur.
Mais va savoir pourquoi, ce n'est pas le cas ici : les largeurs que j'ai indiquées ne sont pas théoriques mais mesurées in situ.

Pour la marge de trop à droite, j'ai fini par débusquer la petite saleté qui gênait : Wordpress avait rajouté un <p></p> dans le Table, après la 3ème colonne. Merci Wordpress de continuer à bien nous emm...der avec ça !! (et pourtant j'ai bien désactivé le wpautop... vraiment très très très soulant leur système, que d'heures perdues à cause de ça)

Donc j'ai finalement obtenu le résultat escompté (à part que le Table n'est pas responsive), et je te remercie sincèrement pour ton aide.

Zenen a écrit :
Alors dans la théorie tu as tout à fait raison : les padding sont inclus dans la largeur.
Mais va savoir pourquoi, ce n'est pas le cas ici : les largeurs que j'ai indiquées ne sont pas théoriques mais mesurées in situ.

En fait le table-layout: auto est un algorithme très complexe laissé libre d'implémentation (même avec des différences) en CSS2.1. Cela pourrait changer avec CSS3.

Avec table-layout: fixed, les tailles sont de nouveau gérée comme une boîte standard, il faut alors ajouter box-sizing: border-box pour retrouver ce comportement.

Je ne suis pas assez calé pour bien saisir ça.

Au fait si quelqu'un connait un moyen pour centrer verticalement une image dans une div, en conservant le thème RESPONSiVE, ça m'intéresse grandement !

J'avoue que je perds le fil . Le ".table" possède un "table-layout:fixed" donc sans spécifier les largeurs individuellement, celles-ci sont calculées automatiquement de telle sorte à ce qu'elles soient toutes égales. Dans ce cas, sans spécifier de largeur, si tu utilises des padding, ces derniers seront déduits de la largeur calculée. Donc si tes colonnes ont une largeur préétablie de 300px, même en ajoutant des padding, elles feront toujours 300px de large.
Si tu spécifies une largeur à une de tes colonnes, les autres seront recalculées mais dans ce cas, les padding s'ajoutent et il faut passer les colonnes en "box-sizing:border-box" pour garder le comportement précédent.
Pour ta dernière question, je n'arrive pas comprendre comment tu perds l'aspect responsif ?