Luan Garcia » xhtml, css, jquery e webstandards

Vamos falar de um bug muito chato e que atrapalha demais a nós desenvolvedores.

Quantas vezes nos deparamas com um bug chato e que a príncipio nao saberíamos como resolver? Então é sobre um destes que vou falar agora.

Este bug ocorre em div’s que possuem elementos com float. Qual é o bug? Simples, toda vez que uma div possui elementos com float, essa div perde altura. Ahh nao entendi nada.. calma, vai entender, mas antes baixe meu exemplo abaixo.

Obs.: Esse bug ocorre tanto no FF quanto no IE.

Clique aqui para baixar este exemplo.

Reparem que eu praticamente fiz um tutorial dentro do html. Vou dar uma resumida do que tem lá.

Primeiramente voce irá se deparar com o html todo bonitinho, sem nenhum bug. A princípio vou pedir para comentar os css’s(no tutorial dentro do arquivo vem explicando) para que o bug possa aparecer. Depois disso começa a fase de teste.

Na estrutura que montei existe uma div chamada #container e dentro dessa div tem duas div’s com as respectivas classes: .c1 e .c2. E logo abaixo da div #container (fora dela), está a div .teste.

Vocês vão reparar que de primeira vou dar uma solução que resolve porém que não é a ideal. Isso servirá para abrirmos um leque de opções para “n” tipos de bugs. No exemplo que dei, o bug começa quando peço para comentar no css de #container os atributos overflow e zoom. Neste mesmo momento tiraremos também o atributo clear: both; de .teste.

O que acontece é o bug que estamos estudando. A div #container perde altura e ai com isso, a div .teste que esta abaixo, vai parar ao lado das divs .c1 e .c2.. Repare isso pelas bordas que coloquei em cada div, cada borda com uma cor diferente para podermos diferencia-las.

Num dos primeiros testes que fiz, eu coloquei a div .teste para baixo, no lugar onde ela, de fato, deveria estar, mas para que isso aconteça, é necessário descomentar o atributo clear: both; que colocamos no início. Este é apenas um meio de resolver, porém, longe de ser a solução ideal, pois reparamos que por mais que a div .teste vá para o seu lugar certo, a div #container continua sem altura… e para corrigir isso vamos para o próximo passo.

Existem pelo menos umas 2 maneiras parar resolver esta tipo de bug(que eu conheça). A primeira é com o famoso clearfix. Acho que todos ja ouviram falar desse camarada, mas não é o foco de hoje, vou mostrar como resolver de outra forma.

Vocês lembram que no início do tutorial, eu pedi para comentar os atributos overflow e zoom da div #container? Iremos por partes. Vamos precisar do FF e os IE’s da vida para fazer os teste… Então abram FF,IE7 / IE8, e o IE6.

Abertos os navegadores, vamos no css e descomentem o atributo overflow, apenas ele. Testem nos navegadores. Como podem ver, o bug foi corrigido apenas no FF, porém nos IE’s, ele nao funfou. Logo, vamos ter que descomentar o atributo zoom, pois é este elemento que vai fazer com que a solução funcione nos IE’s.

Pronto..e ai está nossa solução mega simples para corrigir a perda de altura em divs que possuem elementos com floats. Neste tutorial eu usei o overflow:hidden; porém, pode-se usar o overflow: auto; que funciona da mesma forma.

Valeu galera, espero que gostem e que sirva para algo útil. Abs!

72 Assinantes | 176 Seguidores