Hauteur d'une div toujours égale à une autre

Bonjour , pour faire simple j'ai une div container qui englobe les autres, une div gauche qui est la principale, et une div droite qui n'est pas entièrement remplie, et qui est écourtée..

http://www.allo-service-client.com/

je n'arrive pas à trouver en css un code pour qu'elle soit toujours égale à celle de gauche ( div droite height = gauche )

j'ai essayé les absolute / relative mais je ne suis pas sur d'avoir tout compris car ça ne fonctionne pas..

Merci !

Salut,


Voila un article qui va pouvoir t'aider : Les colonnes factices.

Tu peux également t'inspirer du flex : CSS3 Flexbox Layout module

Je te laisse aussi deux petit liens qui pourront t'éclairer, te donner des pistes etc. (le premier article que je t'ai donné est tiré du dernier article en dessous)

Mise en page CSS avancée grâce à la propriété display

Un design fluide avec trois «colonnes», grâce au positionnement flottant


Au passage revois un peu les positionnements proposés par ces article, le float peut avoir sa place, mais sur un seul des bloc, pas les deux en meme temps (histoire de flux toussa toussa)

Bonne continuation !

merci y'a de quoi faire !

Si je me souviens bien, il suffit de mettre les deux divs en display: table-cell.

thierry a écrit :
Si je me souviens bien, il suffit de mettre les deux divs en display: table-cell.

C'est aussi l'option que je privilégierais car plus rétrocompatible qu'une solution flexbox.

Un exemple : CodePen

Edit : Je ne comprends pas très bien ton exemple, les écritures sont différentes de ce que j'ai en css..

Je suis censé mettre si j'ai suivi simplement :

dans ma #div gauche { display: table-cell; }
dans ma #div droite {display: table-cell;}

ça ne me change rien à l'affichage actuel
Modifié par Marxkas (19 Jun 2016 - 17:10)

Personnellement je te conseille d'utiliser Flexbox ! C'est certes moins rétrocompatible, mais beaucoup beaucoup plus puissant que les anciennes méthodes et compatible avec tous les navigateurs récents.

Marxkas a écrit :
Edit : Je ne comprends pas très bien ton exemple, les écritures sont différentes de ce que j'ai en css..

Je suis censé mettre si j'ai suivi simplement :

dans ma #div gauche { display: table-cell; }
dans ma #div droite {display: table-cell;}

ça ne me change rien à l'affichage actuel

Que se soit flex ou table, il te faut un parent commun, pour le coup un parent en display:table; sinon table-cell tout seul ça fait pas grand chose d'autre que de juste modifier le contexte de formatage...

Marxkas a écrit :

dans ma div#gauche { display: table-cell; }
dans ma div#droite {display: table-cell;}

ça ne me change rien à l'affichage actuel

Est-ce que cela ne marcherait pas mieux comme ça ?


Le parent 'table' se crée s'il n'existe pas il me semble...

Zelena a écrit :

Le parent 'table' se crée s'il n'existe pas il me semble...

Pas vraiment et encore faut-il qu'il y en ai un juste pour ces deux là, l'opposée c'est pareil, parent en display:table ne tourne pas (plus) les enfants en table-cell ... Dans tout les cas, il faut explicitement declaré ces changement de valeur de display qui ont un effet sur le contexte de formatage .. je rechercher un vieux post ici d'il y a une dizaine d'année sur un problème similaire et avec une solution similaire: déclaré les display:table & compagnie à tout les niveaux ... Recherche infructueuse même via gogle

D'accord, mea culpa, l'élément 'table' ne se crée pas... mais les deux divs en 'display : table-cell', ça fonctionne... et c'est ce que veut Marxkas, non ?

C'est un peu compliqué... mais tout est expliqué dans un tutoriel de ce site :
http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html

Je vais m'y pencher, oui c'est ce que je veux, merci !