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.
Essas técnicas que exploram o quirks mode do IE não me agradam muito, ainda prefiro o holy grail que apesar de um pouco mais complicado, é mais divertido :-)
ResponderExcluirLembro que há um tempo atrás qdo procurava por esta história de colunas com tamanho igual encontrei alguma coisa em inglês desta técnica com table e table-cell, mas parece que os desenvolvedores estão deixando de lado exatamente pelo fato de usar o quircks mode do IE.
Mas mesmo, assim. Muito bom e muito bem escrito o tutorial, continue assim e quem sabe consigamos mudar um pouco todo este lixo que temos hoje na web! :)
Olá! Desculpe estar escrevendo por aqui, é que não encontrei seu e-mail. Gostaria de lhe convidar a escrever alguns artigos sobre ajax, java-script, enfim, assuntos voltados ajax no site Ajax Online (www.ajaxonline.com.br). Não se preocupe se você não tem muito tempo, não cobro meus colunistas, o importante é contribuir :) Qualquer coisa manda um e-mail para contato@ajaxonline.com.br. Aguardo sua resposta! E parabéns pelo blog! Abraços!
ResponderExcluirMuito bom!!!
ResponderExcluirDescobri essa mágica há pouco tempo lá no iEvolution com o TheChessMan.
Parabéns e continue asssim, os posts estão ótimos!!!
;*
Era Justamente isso!
ResponderExcluirSó que eu conhecia com outro nome!
Vlw, pela ajuda, vou testar aqui!
Abraços!
Legal... Existem algumas técnicas por aí, auxiliando na construção de layouts com colunas de tamanhos iguais.
ResponderExcluirEsse é um problema que terá de ser resolvido no desenvolvimento dentro dos padrões, em relação ao uso de tabelas... Mas ainda bem que o pessoal sempre encontra alternativas pra contornar isso =)
Como eu já falei acima no post, o Firefox apresenta um bug MUITO estranho com esta técnica de vez em quando.
ResponderExcluirÀs vezes, ele joga a segunda coluna para a linha de baixo misteriosamente.
Pra corrigir isto, basta você fazer algumas coisas bestas como:
1) Redimensionar o navegador
2) Minimizar/maximizar o navegador
3) Abrir a edição de CSS da página usando o Webdeveloper toolbar
4) Dar um simples F5 na página.
Realmente é um bug estranho, se alguém puder me explicar...
Muito bom, cara.
ResponderExcluirMuito mais consistente do que Faux Columns que, dependendo do caso, pode dar uma dor de cabeça, por exemplo, se o fundo tiver um degradê mais trabalhado, etc.
Já tinha pensado em algo do tipo, mas como não achei nada a respeito, preferi o comodismo de achar que não existia... rsrs Maldita preguiça :D
Bom artigo Náiron, pena eu não ser adepto a dar colher de chá pro IE...
ResponderExcluirVolto a lembrar a todos que quiserem usar esta técnica que estejam atentos ao possível bug que pode ocorrer com o Firefox.
ResponderExcluirEsperamos que na próxima versão do FF eles corrijam este bug com o display: table.
Esse bug do display table, pelo que vejo é próprio do Firefox mesmo, parece que acontece quando as "colunas" tem um container com display:table (estas colunas devem usar float)..
ResponderExcluirIsto torna o uso dessa técnica bastante incerto.. tive e tenho ainda sites com problema no FF por causa disso...
Olá Micox. Queria saber se você sabe de um bug que está dando aqui no meu código. É que quando eu coloco
ResponderExcluir>html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"<
antes do:
>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"<
o código funciona tranquilo no IE.
O problema é quando faço o contrário, ele não funciona. E o meu site só funciona quando ele está ao contrário (também não sei porque)
Desde já eu agradeço! Té. parabéns pelo post!
Daniel, isto não é bug. É erro seu mesmo. O doctype DEVE ser a primeira coisa do seu código e não a tag HTML.
ResponderExcluirserá que esse erro no firefox nao é por causa da barra de rolagem?
ResponderExcluirno ff ela so aparece quando precisa, e quando aparece, a largura da pagina diminui.
tenta colocar o seguinte codigo no css:
html {
overflow: -moz-scrollbars-vertical;
}
Assim a pagina sempre mostra a barra, mesmo que desativada.
Valew!!
Acho que resolve
Acho que não é não Ezequias.
ResponderExcluirO problema acontece mesmo em conteúdos pequenos que não precisam de barra de rolagem.
Algumas soluções pro bug aqui.
Brother, você me salvou com esta solução!
ResponderExcluirValeu pela força!
Abração, FreakEROS.
O bug do float que falamos nos comentários acima foi solucionado pelo grande thechessman. Veja aqui a explicação.
ResponderExcluirIh, no IE 7 não funciona... existe alguma solução para isso?
ResponderExcluir[url=http://rastimores.net/][img]http://rastimores.net/img-add/euro2.jpg[/img][/url]
ResponderExcluir[b]nero coupon, [url=http://akreoplastoes.net/]proxis store manager software[/url]
[url=http://akreoplastoes.net/][/url] office software programs macromedia dreamweaver 8 software
software reseller uk [url=http://akreoplastoes.net/]microsoft office word 2003 product key[/url] macromedia dream weaver software
[url=http://akreoplastoes.net/]block for mechanical autocad[/url] macromedia com software flash player
[url=http://rastimores.net/]software utilities downloads[/url] cheap software for sale
between academic software and [url=http://akreoplastoes.net/]rm educational software[/url][/b]
[url=http://sapresodas.net/][img]http://sapresodas.net/img-add/euro2.jpg[/img][/url]
ResponderExcluir[b]where can i find free acdsee software, [url=http://vioperdosas.net/]cheap software store[/url]
[url=http://vioperdosas.net/]buy windows mobile software[/url] coreldraw 12 graphics suite downloads office software update
discount oem software [url=http://vioperdosas.net/]2004 Mac[/url] cheap kids software
[url=http://vioperdosas.net/]nero 8[/url] Adobe Photoshop CS3 Extended
[url=http://sapresodas.net/]650 oem software[/url] software resellers australia
nero wolf [url=http://vioperdosas.net/]windows vista theme download[/url][/b]