Olá pessoal,
Hoje vou postar sobre uma técnica que desenvolvi para a resolução do problema de colunas com alturas iguais com CSS usando "display: table".
Diferente das técnicas mais comuns, faux columns e equals height, esta é uma técnica bastante simples e fácil de ser customizada.
Como no Brasil este assunto foi pouco abordado, eu achei que seria o primeiro a falar sobre isso. Porém, muitos sites gringos já abordaram o assunto: Roger Johansson, Position Everything, SnipSnap e lista com testes em navegadores (comigo não aconteceram alguns erros aí citados).
Bom, mas aqui no Brasil, acho que sou o primeiro a falar sobre isto e postar exemplos.
Antes, algumas prévias desta técnica de colunas com alturas iguais:
- O código deste exemplo
- Uma pagina pré estilizada
- Uma página real (layout fluido)
Estas 3 páginas foram testadas com sucesso no Firefox 1.5, Internet Explorer 6.0 e Opera 8.5.
Nível do tutorial: apenas para já iniciados nas Web Standards.
Agora vamos começar.
//Obs.: Misteriosamente, às vezes, um bug no Firefox faz com que a 3a coluna apareça na linha de baixo a primeira vez que a página é carregada. Se alguém puder me explicar, eu agradeço.
1. Os poderes do display: table, e display: cell
Poucos conhecem a declaração "display: table". Com ela (e suas variações "display: table-cell" e "display: table-row") o desenvolvedor pode simular características de tabelas. Não explicarei muito: desenvolvedores de qualidade já escreveram sobre isso.
E daí? E daí que você poderá usá-la para resolver alguns possíveis "problemas" no seu desenvolvimento CSS como: colocar o vertical align pra funcionar, dar altura a pai de elementos float, resolver problemas em menus horizontais, e agora servirá para fazer colunas com alturas iguais.
2. O código (X)HTML
2.1. Englobe com um div pai, as divs que deverão ter alturas iguais .
2.2. Neste div pai, coloque o id="cols"
2.3. Exemplo:
<div id="cols">
<div>
<p>Coluna 1 coluna 1 Coluna 1 coluna 1</p>
<p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
</div>
<div>
<p>Coluna 2 coluna 2 Coluna 2 coluna 2 </p>
<p><a href="http://elmicox.blogspot.com">El micox 2 </a> El micox 2 El micox 2 </p>
</div>
<div>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
</div>
</div>
3. O código CSS
3.1. No div pai (id=cols), coloque um "display: table" nele.
3.2. Nas divs colunas filhas, coloque um "display: table-cell" e um "vertical-align: top".
3.3. Obs.: Alguns colocariam "display: table-row" no pai dos "display: table-cell" por considerarem que é mais correto (eu por exemplo), porém se colocarmos o table-row irá ocorrer um espaçamentozinho no Opera.
3.4. Exemplo (coloquei uma bordinha vermelha pra ficar mais fácil de visualizar):
#cols { display: table; width: 100%; }
#cols div { display:table-cell; vertical-align:top; border: 1px solid #F00;}
3.6. Tudo muito bonito, muito legal, menos no nosso velho amigo IE que não entende o "display: table". Para ele, teremos que usar algumas declarações dentro de comentários condicionais (use o hack estrela para IE se preferir).
<!--[if IE]>
<style>
#cols { height:100%; }
#cols div { height:100%; float:left; }
</style>
<![endif]-->
3.7. Você acha que agora está tudo certo né? Errado. Se você declara corretamente o DOCTYPE você deve ter visto que estas regras para o IE não deixaram as alturas das colunas iguais.
A solução? Faça os bugs do IE trabalharem pra você.
Se você colocar ele pra trabalhar em quirks mode, ele fará com que as alturas das divs filhas float fiquem iguais e fica tudo funcionando.
Como? Simples, adicione o prólogo XML no início do seu documento. Como o IE não entende o prólogo XML (que burrico hehe) ele irá começar a trabalhar em quirks mode e dará a nossas colunas, alguras iguais!!!
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.8. Posteriormente, adicione declarações definindo a largura de cada div sua da forma que desejar.
4. O código completo.
Pra quem gosta de control C, control V, é só customizar o código abaixo:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#cols { display: table; width: 100%;}
#cols div { display:table-cell; vertical-align:top; border: 1px solid #F00;}
</style>
<!--[if IE]>
<style>
#cols { height:100%; }
#cols div { height:100%; float:left; }
</style>
<![endif]-->
</head>
<body>
<div id="topo">Sou o topo blablabla</div>
<div id="cols">
<div>
<p>Coluna 1 coluna 1 Coluna 1 coluna 1</p>
<p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
</div>
<div>
<p>Coluna 2 coluna 2 Coluna 2 coluna 2 </p>
<p><a href="http://elmicox.blogspot.com">El micox 2 </a> El micox 2 El micox 2 </p>
</div>
<div>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
</div>
</div>
<div id="rodape">Sou o rodape blablabla</div>
</body>
5. Finalizando
Eu não tive como testar esta técnica em vários navegadores. Se vc tiver testado, por favor, comente aqui.
Se tiver encontrado algum bug ou problema, me informe (pode ser nos comentários) para que possamos resolver :) .
Caso o conteúdo tenha quebrado para baixo no firefox, (o famoso bug do display table no firefox), veja as possíveis soluções aqui. Eu recomendo a solução do Chessman (mais sobre aqui).
Esta técnica de display table não está restrita à construção de layout inteiro da página. Você pode usar em outras coisas também, como citei no começo deste post.
Se algum site brazuca já falou sobre o assunto, poste aqui pra eu saber também.
Dúvidas? Jogue elas no iEvolution, não aqui.
