15th jun 2009
O POG nosso de cada dia #10
Esse é um POG relacionado a CSS, que estava pra postar a algum tempo e por um acaso vi ele num post do Yogodoshi: quando a div pai não acompanha a altura das divs filhas.
O que seria isso? Imagine que você tenha o seguinte html:
<div style=”border:1px solid #FF0000;”>
<div style=”float:left; border:1px solid #00FF00; “>primeira div</div>
<div style=”float:left; border:1px solid #0000FF; “>segunda div</div>
<div style=”float:left; border:1px solid #00FFFF; “>terceira div</div>
</div>
O que aparece no browser? Algo desse gênero
Pode-se ver que a div pai, que tem a borda vermelha, não acompanhou a altura das divs filhas. Essa é uma questão já muito discutida em diversos blogs, e existem várias formas de fazer com que a div pai acompanhe as filhas; uma delas é usar uma técnica chamada clearfix
Outra, muito mais rápida e simples – mas que suja a sua marcacão html, é inserir um <br style=”clear:both;” /> antes de fechar a div pai.
<div style=”border:1px solid #FF0000;”>
<div style=”float:left; border:1px solid #00FF00; “>primeira div</div>
<div style=”float:left; border:1px solid #0000FF; “>segunda div</div>
<div style=”float:left; border:1px solid #00FFFF; “>terceira div</div>
<br style=”clear:both;” />
</div>
Esse br faz com que a div pai, tendo pelo menos um filho que não flutua, calcule a altura que deve ter.
Posts relacionados
Avalie
(No Ratings Yet)
O POG nosso de cada dia #10…
Como resolver o problema da div pai não acompanhar a altura das divs filhas: POG…
Normalmente ai uso “display: table”, apesar de recorrer ao “clear: both” em casos extremos.
Nossa, ressucito meu post hein @chrisb =p
E Diogo, o problema do display:table é que ele não funfa no IE 7 (no 6 mt menos, provavelmente), aí teria ooouutro POG pra resolver isso xD
Abraços!
Só que o rápido e simples de hoje é a dor de cabeça de amanhã, né?
@thiago pode ser a dor de cabeça de amanhã se a “coisa” crescer… hehe
@yogodoshi a volta dos mortos-vivos quase!
Pra mim um overflow:auto sempre resolveu o “problema”…já testaram? Se o pai não tiver altura fixa vai funcionar certinho
Viva ao POG.
Abraço
Ops, esqueci de comentar… se o pai tiver altura fixa, aparecerá barra de rolagem.
Jackson, não sabia que funcionava para todos os casos o overflow:auto
Fui procurar e até encontrei um post no Quirksmode sobre isso! http://www.quirksmode.org/css/clearing.html
Vlw!
Opa, show de bola…no Quirks explica certinho…e lembrando que é necessário definir uma largura para o pai para que funcione de forma adequada no IE.
“The width is necessary to trigger “hasLayout” in Explorer Windows (except for 7).”
Vivendo e aprendendo! hehe
Fiquei tanto tempo usando a solução do “clearfix” que acabei me acostumando a ela…
Boa dica
[...] #10: <br /> para forçar altura da div pai [...]
Velho problema. Nova solução.
Ótima dica!
outra:
A tag br tem um atributo “clear”. em HTML até 3.2 e XHTML1.0
<br clear="all" />@Thiago: Menos arriscado que usar CSS
Menos arriscado, Acelio? Não acho… além do que, como você mesmo disse só vai até o HTML 3.X, sendo que já estamos *quase* no 5… hehe
Solução:
Primeiro, semanticamente DIV é usada pra layer, em casos de inline usa-se SPAN.
Mas já que a questão é resolver o problema, elimine o BR, e coloque “display: inline” no lugar do “float: left” no style das DIVs internas;)
ficaria assim:
primeira div
segunda div
terceira div
Sucesso para todos
Walker, a questão comentada no post não tinha nada a ver com inline ou block… o trecho de código foi apenas para ilustrar um layout de 3 colunas (não iria escrever um código inteiro só para exemplificar). Se trocar por inline, não é possível fazer o tal layout de 3 colunas…
Abraços!
ops, falhou o post anterior…
portanto segue o style como ficaria
style=”display:inline; border:1px solid #00FF00;”
Cara, essa solução foi a melhor que eu encontrei!!! mto bom