Problème avec div flottant

Bonjour,

Je m'arrache les cheveux depuis ce matin sur un problème de css.

Voici la page web en question : http://oceansims.free.fr/site/femme_enfant.php
(Il ne faut regarder que les premières images de la page, à partir d'un moment ça devient le bazar et c'est normal car je ne l'ai pas terminée.)

Les photos sont rangées par paires de deux, comme ceci :

<div class="ensemble_de_photos">

    <div class="photo_1">
    
    ........image1........
      
    </div>  
  
    <div class="photo_2">

    ........image2.........    
        
    </div>
    
</div>

Mon soucis : Le div bordé de rouge (ensemble_de_photos) n'a pas de hauteur définie.
Il prend la hauteur du second div qu'il contient.
Ca pose un problème, comme pour la première paire d'images.
En effet, la première image est plus grande que la seconde, et son div déborde donc du premier.

Comment faire pour que le div bordé de rouge puisse prendre la hauteur du plus grand des deux div internes ?

Voici le morceau de css :

.ensemble_de_photos{
border: 2px solid red;
width: 690px;
}

.photo_1{
float: left;
width: 330px;
text-align: center;
margin: 0; 
border: 1px solid black;
}

.photo_2{
margin-left : 360px;
width: 330px;
text-align: center; 
border: 1px solid black;
}

Par avance, merci

Salut

Toute les info ici http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Et on dit Merci a mpop pour le tuto

A+

Salut,

Merci pour le lien.
J'ai appliqué la méthode overflow: auto.
Et ça fonctionne

@ +

gege71 a écrit :
Et on dit Merci a mpop pour le tuto

De rien
Ce genre de choses, faut que ça serve.

Un jour il faudra que je regroupe ensemble les infos sur les flottants, pour avoir une référence solide.

Edit : 1100 posts…
Modifié par mpop (05 Jun 2006 - 00:45)