Div aligné en bas d'une colonne ayant une hauteur dynamique.

Bonjour à tous,

Voici mon problème :

Je travail sur un site ayant 2 colonnes, une à gauche avec le contenu et une à droite pour des informations.
Ma colonne de gauche est dynamique, elle s'adapte au contenu.

Ce que je souhaite faire : dans ma colonne de droite, j'ai 2 div une en dessous de l'autre et j'aimerai que ma div du bas soit toujours aligné avec le bas de ma div contenu. Il faut donc que ma colonne de droite soit aussi dynamique.

J'ai testé avec du table-cell sur les 2 colonnes et effectivement les 2 colonnes ont la même hauteur, mais pas moyen d'avoir la div coller au bas.

Avez vous une solutions applicable ?

Merci d'avance.

pour navigateur récent , il y a display:flex; http://codepen.io/gc-nomade/pen/ILtjr


https://www.google.fr/search?q=display%3Aflex

Si tes div en table-cell ont bien la même hauteur, il suffit de mettre un vertical-align: bottom pour les aligner en bas… Et il faudra gérer ta div du haut différemment.

Sinon ce doit être possible en jouant avec une position: absolute, mais je crois que le nœud du problème vient plutôt du HTML. La div du bas devrait être dans le même conteneur que celle de gauche, puisqu’elle lui est associée « physiquement ». Et celle d’en haut à droite rester bien gentiment dans son flux.

Ou inversement d’ailleurs. Si tu nous créés un pen ou un dabblet je pourrais essayer de te faire un exemple

Bon courage !

Display:flex c'est pas mal, mais j'aimerai autant que possible que la solution soit visible pour le plus grand monde.

Pour le vertical-align, ça fonctionne si je le met sur le conteneur qui a table-cell et accessoirement celui qui a les 2 div, donc c'est les 2 qui se retrouvent en bas.

Voici le lien vers le dabblet

Merci en tout cas. La position absolute n'est pas vraiment pratique, parce qu'elle n'est pas dynamique, si mon contenu est plus grand, la div du bas ne bougera pas.

Pour le position absolute, je pensais plutôt à celle du haut : tu laisses le vertical-align: bottom sur le parent, comme ça par défaut elles sont toutes les deux en bas, et sur celle du haut tu mets simplement un position: absolute et top: 0 (en ayant un position relative sur un des deux parents au-dessus).

Ainsi celle du haut serait toujours parfaitement en haut, et celle du bas toujours parfaitement en bas. Deux soucis avec cette solution :
- si jamais les hauteurs des deux divs cumulées à droite sont plus grandes que la hauteur de la div de gauche, elles vont se chevaucher.
- Firefox a eu pour habitude de merdouiller quand on mélangeait des display: table et des position. Je ne sais pas si c’est toujours le cas mais c’est un risque.

J’essaie de regarder ça sur ton dabblet mais je ne promets rien pour aujourd’hui !

ah oui, évidemment, c'est bien plus logique, j'aurais pu y penser

Je viens de tester et ça fonctionne au poil ! Et oui, si le contenu à gauche n'est pas assez grand, y'aura problème, mais je ne pense pas que ça sera le cas, sinon j'aviserais

merci et n'hésitez pas, si jamais vous avez d'autres solutions, je suis preneur.

sinon il reste javascript/jQuery pour evaluer la hauteur de la première cellule.
et avec la particularité des flottants on peut repousser vers le bas le second élément.
http://codepen.io/gc-nomade/pen/vfoAr

Une base de 3 lignes en jquery

var articleH = $("#col1").height();
var bottomH  =  $("#bottom").height();
$("#fix").css('height', articleH-bottomH+'px');

Modifié par gc-nomade (03 Jun 2014 - 11:10)

Oui j'avais vu aussi le jQuery, mais je voulais resté en CSS, même si c'est vrai que ces 3 lignes ne passerons pas lourd dans le chargement.