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.

2 comentários em “CSS: Bug do Float/Display: Table do Firefox

  • 23 de setembro de 2009 em 1:12
    Permalink

    Cara estou com esse problemas mas não consegui resolver de jeito algum =/
    Esse div:#conteudo:after{ deve ser inserido depois da declaração normal de #conteudo ?

    Fiz, mexi e nada…
    Pra resolver o problema momentaneo eu corri pras tabelas
    http://www.youx.com.br/index.html

    abs

    Resposta
    • 23 de setembro de 2009 em 8:36
      Permalink

      Olá Bruno,

      dentro do css você formata o div #conteudo normalmente e depois inseri o div#conteudo:after com todo os dados informados no post. Não sei se você colocou o : (2 pontos) depois do div por engano, mas se colocou dessa forma no código css está errado. O correto é div#conteudo:after{}.

      Se for o caso posta uma parte do código css e do html para que possamos dar uma olhadinha.

      Abraços. Tiago

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *