Régler la hauteur des divisions réelles pour égaler son frère ou sœur

J'ai deux divs dont les largeurs sont contrôlées par des pourcentages. Je veux que le div droit soit exactement aussi grand que le div gauche, qui se dilate et se rétrécit en fonction de la largeur de l'image qu'il contient et de la largeur de la fenêtre du navigateur.

Existe-t-il un moyen d'y parvenir sans javascript?

Http://jsfiddle.net/5JU2t/

La manière la plus simple d'y parvenir est de rendre le div .right absolument positionné et le réglage en top et en bottom à 0 .

N'oubliez pas de .main le parent ( .main ) div relativement et de supprimer tous les flotteurs:

 .right { bottom:0; position: absolute; right:0; top: 0; } .main { position: relative; }

Exemple de travail: http://jsfiddle.net/5JU2t/1/

Remarque

La raison pour laquelle la colonne de droite est un peu plus longue dans l'exemple est due à l'espace blanc ajouté sous une image. Si vous n'utilisez qu'une image dans cette colonne, vous pouvez ajouter un float: left de l'image pour résoudre ceci:

Exemple de travail: http://jsfiddle.net/5JU2t/2/

J'essayerais de l'enrouler dans une troisième division et de donner à vos deux divs soit la height:auto soit la height: 100% .

Configurez le parent ( .main ) pour afficher en tant que tableau et configurez les enfants ( .right , .left ) pour afficher comme cellule de table.

Je dirais funk tout le css supplémentaire et utiliser une disposition de table