DIV perde altura se estiver usando elementos com float.

O escreveu (ou copiou) isso no dia 12/08/2010, e alterou 04/08/2012 Voltar

Quantas vezes nos quando estamos desenvolvendo alguma estrutura e vem aquele bug chato e que a princípio não saberíamos como resolver?

Este bug ocorre nas "DIV's" que possuem elementos com a propriedade "FLOAT". Qual é o bug? Fácil, toda vez que uma "DIV" possui elementos com "FLOAT", essa "DIV" perde altura... Não entendeu? Vamos lá para você entender... 

Vamos começar pelo código HTML!

(layout simples com um topo, duas colunas e rodape) 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV perde altura com propriedade float</title>
</head>
<body>
    <div id="geral">
        <div class="topo">Exemplo de TOPO</div>
        <div class="coluna-um">
            <p>Coluna-Um</p>
            <p>Coluna-Um</p>
            <p>Coluna-Um</p>
            <p>Coluna-Um</p>
        </div>
        <div class="coluna-dois">
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
            <p>Coluna-Dois</p>
        </div>
    </div>
    <div class="rodape">Tutorial por: Henrique R. Pohl</div>
</body>
</html>   

Ok, esta é a estrutura HTML que vamos trabalhar... agora, vamos ao CSS!    

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
    }
 
#geral {
    background-color: red;
    overflow:hidden;
    zoom:1;
    }
 
.topo {
    background-color: cyan;
    text-align:center;
    font-weight:bold;
    padding:10px;
    }
 
.coluna-um {
    float: left;
    padding:5px;
    font-weight:bold;
    background-color: blue;
    width: 100px;
    }
 
.coluna-dois {
    float: right;
    padding:5px;
    font-weight:bold;
    background-color: green;
    width: 100px;
    }
 
.rodape {
    background-color: yellow;
    text-align:center;
    font-weight:bold;
    padding:10px;
    clear: both;
    }
</style>    

Pronto.. ai está nossa solução para corrigir a perda de altura em "DIV's" que possuem elementos com "FLOAT". Nesta matéria eu usei o "OVERFLOW: HIDDEN"; porém, você também pode usar o "OVERFLOW: AUTO"; que funciona da mesma forma, também devemos lembrar que usamos o elemento "ZOOM:1" pois é este elemento que vai fazer com que a solução funcione nos IE’s.

OBS: para ver o erro sem esta solução, bastar você retirar os elementos "OVERFLOW: HIDDEN" e o "ZOOM:1" da "DIV" "GERAL" e rodar o script para ver a diferença! 

Qualquer duvida entrem em contato pelo email: henriqpohl@gmail.com.br

Abraços!

Comentar

Quase todos direitos reservados a Newsmade
DIV perde altura se estiver usando elementos com float. | Newsmade