Layout CSS de 2 colunas com faux column

Publicado em: 29/07/2005

Introdução

Neste tutorial mostrarei uma técnica de construção de layout para uma página Web, sem uso de tabelas. O entendimento das propriedades de posicionamento é fundamental para a construção de layouts baseados em CSS . Conhecer com detalhes o comportamento de elementos posicionados com uso de:
position: relative; — position: absolute; — position: fixed; — float
é condição indispensável para começar suas primeiras tentativas de criar um layout.

Depois de conhecer como se comportam os elementos posicionados você terá que se aprofundar no estudo do comportamento diferenciado dos navegadores com relação a cada posicionamento.

A estrutura da página

Vamos construir um layout constituido por:

1. um topo;
2. uma coluna principal;
3. uma coluna de navegação;
4. um rodapé.

A marcação XHTML pura e a renderização podem ser vistas nesta página exemplo -1

O layout a construir

Nossa página terá as seguintes características:

1. largura fixa de 760px;
2. topo com 80px de altura na cor #df7ddf;
3. coluna principal com 578px de largura na cor #99ccff;
4. coluna de navegação com 180px de largura de altura na cor #ffbe7d;
5. rodapé com 20px de altura na cor #b5daa2;
6. coluna de navegação à esquerda e principal à direita

Notar que a soma da largura das colunas é igual a 578px + 180px = 758px.
Como a largura total disponível é de 760px, teremos um espaçamento de 2px entre as colunas.

As primeiras regras CSS e a renderização podem ser vistas nesta página exemplo -2

Posicionando as colunas

Os elementos do layout estão com suas larguras e cores definidas, mas posicionados um embaixo do outro, formando uma pilha de DIVs (elementos nível de bloco), na ordem exata em que aparecem no código.

Vamos deixar o topo em cima, o rodapé embaixo e as colunas uma ao lado da outra. Para isto temos que posicionar as colunas. Usamos a declaração float: right; para a coluna principal e float:left; para a coluna de navegação. E complementarmente temos que "clarear" os elementos flutuados, para que empurrem o que estiver abaixo (no nosso caso o rodapé), declarando clear: both; para o rodapé.
Conforme já observado acima, esperamos um espaçamento de 2px entre as colunas, já que flutuamos uma para cada lado.

O efeito das novas regras CSS e a renderização podem ser vistas nesta página exemplo -3

Adicionando conteúdo nas colunas

Vamos adicionar conteúdo nas colunas para ver como se comportam elementos floats com conteúdos.

Primeiro, conteúdo na coluna principal. Veja o que acontece nesta página exemplo -4

Ops! a coluna principal cresceu para acomodar o conteúdo e "empurrou" o rodapé para baixo.
Mas, a coluna de navegação não acompanhou o crescimento (o que era de se esperar) e deixou um fundo diferente abaixo.

A seguir, conteúdo na coluna de navegação. Veja o que acontece nesta página exemplo -5

Ops! a coluna de navegação cresceu para acomodar o conteúdo e "empurrou" o rodapé para baixo.
Mas, a coluna principal não acompanhou o crescimento (o que era de se esperar) e deixou um fundo diferente abaixo.

Conclusão: As colunas crescem independentes uma da outra, de acordo com o conteúdo nelas existente, e se tiverem cores de fundo diferentes o layout "quebrará" conforme mostrado nos dois exemplos.

A solução

A solução baseia-se em uma técnica CSS que foi denominada por Dan Cederholm de "Faux Columns" que podemos traduzir para "Falsas Colunas". Trata-se na verdade de simular a cor das colunas com uso de uma imagem de fundo.
Notar contudo, de que nada adiantará colocar a imagem como fundo da coluna individualmente.
Temos que colocar a imagem no elemento que está por trás das duas colunas, para que quando acabe a coluna o fundo apereça por trás, dando a impressão de continuidade até o rodapé.

Vamos em frente.
O elemento que está por trás das colunas é a div#tudo. É nele que colocaremos uma imagem de fundo para simular a cor das colunas.
Uma imagem vale mais que mil palavras. Então, para entender o que vai acontecer, veja a seguir a imagem que colocarei como fundo e farei com que ela se repita na vertical, preenchendo todo o elemento.

Imagem para faux columns:

A regra CSS para colocar a imagem de fundo na div#tudo e o resultado no nosso layout, pode ser visto nesta página exemplo -6.

Hum! agora sim, deu para ver que apesar de a coluna de navegação ter esticado para baixo, a cor da coluna principal estendeu-se até o rodapé.
Compare com o a mesma página sem faux column.

E se o conteúdo esticar a coluna principal? Sem problemas e você já deve ter concluido o que acontecerá. Veja nesta página exemplo -7. Compare com o a mesma página sem faux column.

Notar por fim que aquele espaço de 2px entre as colunas foi preenchido com a cor preta existente na imagem da faux column, simulando uma borda. É claro que você pode deixar uma espaço maior ali e projetar uma borda decorativa entre as colunas.

Adicionando margens nos conteúdos

Você com certeza notou, quando viu a página exemplo -6, que os conteúdos das colunas tocam na borda esquerda. Para afastar o conteúdo alguns pixels do limite interno do seu container, usamos padding no container. Certo?
Sim, certo. Vamos colocar 8px de padding na coluna de navegação e 20px de padding na coluna principal, para as duas colunas, em ambos os lados do container.

A regra CSS para adicionar estes paddings e o efeito no nosso layout podem se vistos nesta página exemplo -8 onde eu retirei a faux column para melhor visualização.

Uau! isto ruiu meu layout. Sim ruiu, você viu né?
Era esperada a ruína do layout. Vejamos:
Coluna principal: 578px + 20px + 20px = 618px.
Coluna navegação: 180px + 8px + 8px = 196px.
Soma das colunas: 618px + 196px = 814px

O container das colunas tem 760px e obviamente, não consegue conter 814px. A coluna principal não deixa espaço para acomodar a coluna de navegação à sua esquerda, e esta tem que flutuar logo abaixo dela como constatamos na página visitada.

Solução imediata: Diminuir 16px na largura da coluna de navegação e 40px na largura da coluna coluna principal.
Alternativa: Em lugar de padding para o container, definir margin padding para todos os elementos do conteúdo. Isto faz o mesmo efeito e não altera a largura das colunas.
Usamos o seletor universal estrela (*) para casar todos os elementos do container.

A regra CSS e o resultado no nosso layout, pode ser visto nesta página exemplo -9.

Curiosidade: Se você visualizar a página exemplo -8 no IE 5.0 ou no IE 5.5 o layout estará perfeito, sem quebra. Você sabe responder porque isto acontece naqueles navegadores?

Bônus extra

Como bônus extra desta matéria, vamos centralizar nosso layout na página.

A regra CSS e o resultado no nosso layout, pode ser visto nesta página exemplo -10.