Olá amigos, muito tempo atrás me deparei com uma situação que me fez perder algumas horas de tentativas até conseguir resolver o problema, foi o seguinte:
Eu fiz uma div com duas divs internas, essas duas divs tinha a propriedade float, porém notei que ao aplicar o float nessas divs a div externa perdeu a propriedade que é padrão das divs, height auto.
Depois de umas boas horas tentando resolver o problema eu encontrei a solução na internet, que na verdade é algo bem simples de se fazer!
Outro dia me deparei novamente com este problema, então resolvi compartilhar a solução com vocês afinal muitos outros podem ter enfrentado este problema.
A solução é simples, basta se usar a propriedade overflow com o estado hidden do CSS.

Veja como:

Código:

overflow: hidden;

Faça seus testes aqui
HTML

Código:

<div id="div_externa">
   <div id="div_interna_left">Conteúdo a esquerda</div>
   <div id="div_interna_right">Conteúdo a direita</div>
</div>

CSS

Código:

#div_externa{
  background: #f9f9f9;
  box-shadow: #000 0 0 2px;
  padding: 6px;
  border-radius: 2px;
  font: 11px 'Trebuchet MS';
  width: 400px;
  overflow: hidden;
 
}
#div_interna_right{
  float: right;
}
#div_interna_left{
  float: left;
}

Retirem e coloque o overflow hidden para notarem a diferença!

Espera que seja útil a alguém

Olá!

Vou testar para comprovar o efeito, parece bem interessante...

JS