Bonsoir,  
 
Je ne sais pas si je suis tombé sur un os ou si je suis aveugle pour ne pas trouver l'erreur mais j'ai un soucis avec mon code et la balise float.
 
En gros, j'ai une div "content" qui contient 2 div (left content et right content) de façon a créer deux colonnes.  
 
L'ennui c'est que lorsque je met la propriété float, la div "content" n'a aucune hauteur et mes div qui doivent être à l'intérieur sortent.
 
on distingue la bordure de "content" au dessus.
 
 
 
mon code html:  
 

 
 
Ma css:
 
#content{
background-color:#111111;
margin-top:20px;
margin-left:auto;
margin-right:auto;
border:1px solid #00eaff;
width:88%;
height:auto;
}
#leftcontent{
background-color:#FF0000;
width:50%;
height:400px;
float:left;
}
#rightcontent{
background-color:#00FF00;
width:50%;
height:400px;
float:right;
}
 
 
Je suis bloqué alors soit, c'est vraiment con soit c'est super compliqué  

Effectivement c'est certainement un clear: both qui te manque quelque part, du genre :
 

Tiens oui, cela fonctionne.  
 
Tu peux m'expliquer en gros ce clear: both?

c'est immonde ce <br style="clear: both"> (même pas refermé -> <br /> ) pour rétablir le flux.

il faut éviter ce genre de <br /> sensé être utilisé dans un texte et dans ce contexte il est utilisé pour de la mise en page générale.

ce comportement est normal, il arrive lorsqu'un des floats sont contenus dans un div, voilà une bonne méthode à employer :

#content{
overflow:hidden;
height:1%;
}

pour info : overflow, peut être également mis à "auto", le height:1% sert à activer le hasLayout de ie, width:100% & zoom:1 marche également

plus d'info ici :
http://www.positioniseverything.net/easyclearing.html
http://www.sitepoint.com/blogs/200 [...] of-floats/

 
en gros clear both annule les effets de float mais si tu veux plus de détails il y a pas mal d'explications sur le net donc => google