[résolu] 2 div de même hauteur : cas un peu particulier...

Bonjour,

Sur mon blog (hors-ligne pour l'instant), j'ai 2 div placées côte à côte grâce à un float: left;
Le contenu de la div de gauche est un carousel, et change donc via javaScript. La largeur de cette div est donc fixe (comme celle de droite) ; sa hauteur l'est aussi : elle correspond à la hauteur du plus long texte contenu dans le carousel. Cette hauteur ne peut néanmoins être connue d'avance.

Y a-t-il un moyen pour que la div de droite ait la même hauteur que celle de gauche ? J'ai testé pas mal de solutions trouvées sur ce forum et ailleurs sur le Web, mais aucune ne convenait parfaitement à ce cas particulier...

Merci de votre aide !
Modifié par Fix (26 Aug 2010 - 21:39)

Bonjour,

As-tu fait une recherche sur le forum ou dans la section apprendre ?

Cela t'aurait pris moins de temps que de poster ton message et t'aurait apporté une réponse immédiate.

J'avais pourtant pris la peine de préciser que j'avais effectivement recherché sur ce forum... et même ailleurs.

C'est d'ailleurs un problème qui m'occupe depuis pas mal de temps Mais, je le redis, je n'ai trouvé aucune solution qui y réponde exactement.

Je me permets de reformuler, donc : j'ai 2 div de même hauteur, sachant que cette hauteur N'EST PAS connue, et qu'elle varie selon le contenu de la 1ère div, fixé par javaScript...

Fix a écrit :
sachant que cette hauteur N'EST PAS connue, et qu'elle varie selon le contenu de la 1ère div, fixé par javaScript...

TU es sûr d'avoir lu le tuto ? C'est le but des colonnes factices de gérer des blocs de hauteur inconnue...

J'ai pris le temps de relire le tuto, même si je connaissais le principe des colonnes factices depuis longtemps. Une piqure de rappel ne fait jamais de mal, néanmoins

Dans mon cas, j'aurais quand même préféré les éviter... mais j'aurais dû le préciser : le design de mon site ne contient aucune image, et je tiens à ce que ça reste le cas. Au pire, je me passerai des colonnes de même hauteur...


... cependant, voilà ce à quoi je pensais : sachant ue mes 2 div sont inclues dans un conteneur, n'est-il pas possible (par un "overflow: auto;" dans le conteneur, par exemple, ou par un autre moyen) que le conteneur soit de la même taille que la plus grande div qu'il contient, et que l'on fixe la hauteur de l'autre div à 100% de celle du conteneur ?

C'est ce à quoi je souhaitais parvenir, sans succès jusque là malgré mes nombreuuuuux essais.

Salut,

Fix a écrit :
le design de mon site ne contient aucune image, et je tiens à ce que ça reste le cas.

Dans ce cas regarde du côté de display: table-cell ou tout simplement... un tableau de mise en page si tu as besoin de la compatibilité pour IE < 8.
Modifié par Heyoan (25 Aug 2010 - 12:55)

C'est vrai, j'avais vu passer cela lors de mes recherches... Merci beaucoup pour le lien, très intéressant !

Si j'ai bien compris (?), je dois donc pouvoir ajouter un "display: table-cell;" au style de mes 2 div, et elles devraient, en étant interprétées comme des cellules d'un tableau, acquérir la même hauteur.

C'est donc ce que j'ai fait, mais cela ne change rien ! La hauteur de mes 2 div n'a pas changé, et reste différente. J'ai ajouté un "display: table;" à la div parente (mais est-il indispensable ? Il m'a semblé comprendre que non), sans plus de résultat.

Fix a écrit :
Si j'ai bien compris (?), je dois donc pouvoir ajouter un "display: table-cell;" au style de mes 2 div, et elles devraient, en étant interprétées comme des cellules d'un tableau, acquérir la même hauteur.

Oui.

Fix a écrit :
J'ai ajouté un "display: table;" à la div parente (mais est-il indispensable ? Il m'a semblé comprendre que non)

Non il ne l'est pas.


Tu utilises bien un doctype valide et tu as bien validé ton code ?

Si oui, et à moins que tu n'aies fait le test avec une version d'IE < 8 (qui n'implémentent pas cette propriété), il faudra nous montrer une page en ligne.

Oui ! Le code HTML et la CSS sont valides, et le DOCTYPE est correctement déclaré...

... et pourtant, ça ne fonctionne pas

J'ai donc mis le contenu en ligne : c'est ici.

Merci pour votre aide !

J'ai oublié : je teste sous Firefox et Chrome, dernières versions.

Vu que tu utilises dispaly:table-cell il faut supprimer la propriété float de tes 2 blocs car elles les sort du flux.

Du coup, la largeur fixée pour chacune de mes 2 div n'est plus prise en compte ! Le problème, c'est que la div de gauche contient un texte beaucoup plus large que ce qui est affiché (puisque c'est un carrousel, donc la feuille de style "se contente" de cacher le contenu à droite et à gauche du bloc affiché).

En supprimant mes 2 "float", la largeur de la div de gauche (quelle que soit la taille que je spécifie dans la CSS) est équivalente à celle de la totalité du texte qu'elle contient...

Je me sers de l'extension noscript donc je n'avais pas vu de caroussel.

Alors effectivement par défaut les cellules d'un tableau s'élargissent pour s'adapter à leur contenu... sauf si on leur dit de ne pas le faire :

#content {
	display: table;
	width: 100%;
	table-layout: fixed;
}
#derniersbillets {
	float: none;
	display: table-cell;
}
#dernierstweets { 
	float: none;
	display: table-cell;
}

Modifié par Heyoan (25 Aug 2010 - 18:37)

Merci beaucoup ! Je vais me renseigner un peu plus sur ces différentes classes CSS.

Je suppose néanmoins que les "float: none;" ne sont pas indispensables... de même que le "width: 100%" ?

Fix a écrit :
Merci beaucoup ! Je vais me renseigner un peu plus sur ces différentes classes CSS.

Je suppose néanmoins que les "float: none;" ne sont pas indispensables... de même que le "width: 100%" ?

J'ai mis les "float: none;" pour écraser tes propres déclarations mais sinon c'est inutile. Par contre la propriété (et pas la classe ) "table-layout" nécessite de renseigner une largeur (donc une autre valeur que auto qui est celle par défaut).

Quelques autres remarques/questions :
1. Je remarque que, même si j'ai précisé la largeur de chacune des 2 div, diminuer la largeur de l'une entraîne l'augmentation de la largeur de l'autre. Autrement dit : fixer la largeur de la div parente à 100% et fixer la largeur de la première div seulement est suffisant, non ? Il me semble qu'il est dans ce cas inutile de préciser la largeur de chacune des 2 div ayant la propriété table-cell ?
2. D'après le tutoriel sur display:table-cell, si j'ai bien compris (et ça me semble être une conséquence de ce que je dis ci-dessus en 1) il n'y a pas moyen de séparer chacune des 2 div par un margin:1px; par exemple. Le seul moyen est d'ajouter un border à l'une des 2 div, c'est bien ça ?
3. J'ai voulu, sur la même page, appliquer le même principe aux 3 carrousels que j'avais en-dessous... et ça a fait sauter toute la mise en page !?
4. Sur IE<8, ces différentes propriétés ne sont tout simplement pas interprétées, c'est bien cela ? Donc la seule différence sera que mes div n'auront pas la même hauteur ?

Pour les questions 1 et 2 ça résume bien le fonctionnement des cellules d'un tableau.
A noter que puisque #content est en display: table tu peux utiliser la propriété border-spacing pour écarter les "cellules" l'une de l'autre.

Pour la question 3 : c'est normal puisque tu as fait cela :

.widget div { width: 256px; display: table-cell; }

alors qu'il ne fallait cibler que les 3 conteneurs colorés. En effet le carrousel rajoute des éléments DIV dans le DOM qui sont eux-aussi affectés.

Pour la question 4 : oui mais non. La propriété n'étant pas reconnue les éléments DIV vont se placer les uns sous les autres. Si tu veux gérer ces versions il faut, via commentaire conditionnel, les faire flotter comme avant (avec dégradation gracieuse puisqu'alors les hauteurs ne seront pas égales).

Mmmm, ça se corse :
1. La propriété border-spacing a le désavantage d'ajouter une marge non seulement entre 2 cellules, mais aussi entre les bords du tableau et chaque cellule ; autrement dit, chacune des div filles se retrouve diminuée d'autant à droite ET à gauche... Ne peut-on spécifier que la distance séparant chaque div ? Faut-il pour cela revenir à la propriété border ?
2. Si une div parente (table) contient 3 div filles (table-cell), celles-ci seront toutes, par défaut, de la même largeur sur TOUS les navigateurs ? (c'est le comportement que j'observe sur Firefox) S'il y a 2 pixels à répartir entre ces 3 div (c'est mon cas), alors où iront-ils ? Tous les 2 à la première div ? 1 à la première, et 1 à la deuxième ? Je ne parviens pas à mesurer ça assez précisément avec l'outil de mesure de WebDevelopper... Seront-ils répartis de la même manière sur tous les navigateurs ?

Fix a écrit :
1. La propriété border-spacing a le désavantage d'ajouter une marge non seulement entre 2 cellules, mais aussi entre les bords du tableau et chaque cellule ; autrement dit, chacune des div filles se retrouve diminuée d'autant à droite ET à gauche... Ne peut-on spécifier que la distance séparant chaque div ? Faut-il pour cela revenir à la propriété border ?

Le problème de border dans ce cas est qu'il va rogner le bloc conteneur. Mais je ne comprends pas bien en quoi border-spacing te gène : puisqu'il rajoute également une bordure en haut et sur les côtés de l'élément en display:table il suffit de diminuer d'autant les valeur de margin ou padding correspondants (sur #wrapper, .widget...). Quel est le problème ?

Oui, mais c'est un peu plus compliqué à gérer (margin et padding pas directement sur le div parent etc.).
Surtout, ça me crée des décalages d'1 pixel, ce qui n'est rien... sauf que ça bouleverse le carrousel, qui affiche, lorsque l'on passe aux commentaires suivants par exemple, 1 pixel de la page de carrousel précédente...
J'ai pourtant simplement ajouté le border-spacing d'1 px, et retiré 1px de margin sur les côtés... ce qui aurait dû ne rien changer ?