CSS: Bug do Float/Display: Table do Firefox

Passei por um problema ao desenvolver um site e estarei descrevendo a solução encontrada na internet, a qual me ajudou.

Veja o meu problema: Eu precisava alinhar 2 divs (filhos) dentro de um div (pai). Utilizando o código abaixo, me deparei que ao testar no navegador Firefox o segundo div (#right) ficava embaixo do primeiro (#left). No Internet Explorer e Google Chrome funcionava certinho.

#conteudo{
   display:table;
}

#left, #right{
   float:left;
   padding:10px;
}

Após algumas pesquisas e testes, achei a solução que resolveu o meu problema. Segue abaixo:

div#conteudo:after{
   content:".";
   display:block;
   clear:both;
   visibility:hidden;
   height:0;
   overflow:hidden;
}

#left, #right{
   float:left;
   padding:10px;
}

Explicando: O código diz que logo depois da div#conteudo será inserido um “.” com a definição clear:both para limpar o estilo float. E para não termos problema com o layout, é deixado em oculto.