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.
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
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