DivS flottantS dans un div principal

Bonjour à tous !

Un problème a mon avis simple a résoudre.

j'ai mon div principal, et j'aimerais, faire flotter du texte a gauche et du texte a droite (comme le haut d'un CV le nom + adresse a gauche a gauche et nationalité a droite)

Sauf que probleme : les div flottant sortent du cadres principales...

Voici la structure de mon code :

<div id="corps">

<h1>Curriculum Vitae</h1>

<div class="float_gauche">
XXXX
</div>

<div class="float_droite">
YYYYY
</div>

</div>

et le CSS basic :

#corps {

border: solid;
background-color: rgb(0,255,255);
padding : 1em 3em 1em 1em;

}
#corps h1{
text-align: center;
}

.float_gauche{
float: left;
}

.float_droite{
float: right;
}

Merci d'avance pour votre aide

Salut,

lire l'astuce : Comment éviter que mes éléments flottants (float) dépassent de leur conteneur.

tu me conseille quelle technique, car certe avec un hr ça fonctionne, mais la barre est horriblement moche et je n'arrive pas a faire en sorte qu'elle ne soit pas coller au texte.

Quand cela n'a pas d'impact sur le reste (disparition de contenu) j'ai une préférence pour le overflow:hidden sur le bloc conteneur qui permet de ne pas rajouter d'élément html. En clair :

#corps {
   ...
   overflow: hidden;
}

Je vote aussi pour le overflow:hidden. À savoir que pour IE6, il faudra utiliser le HasLayout sur le conteneur pour obtenir le même effet.

Sinon il est aussi possible d'utiliser le HasLayout à la fois pour IE6 et IE7 (avec un zoom:1 ou simplement une hauteur ou une largeur définie), et un display:table pour tous les autres navigateurs (IE8 compris). C'est une solution que j'utilise à l'occasion.

Enfin, la solution de repli qui marche bien c'est le <div style="clear:both"></div> placé avant la balise de fin du conteneur. Donc comme l'astuce avec le HR, mais ici avec un élément DIV invisible et qui ne devrait pas prendre de hauteur.