Layout de três colunas com alturas iguais em CSS

Todo bom desenvolvedor de sites já deve ter atravessado o purgatório tentando resolver esse problema: Ao fazer um site com layout de três colunas, descobrimos que a altura delas não é nunca a mesma e isso quebra totalmente o layout. Exemplificando:

Menu
lateral
com
cinco
linhas

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

Navegação
direita

Mas como resolver esse problema?

Existem várias formas. Uma delas é tirar uma fatia do layout e usar ele como fundo no div principal. Isso funciona perfeitamente e uso na maioria dos sites que desenvolvo. Isso cria a ilusão de que as colunas possuem todas a mesma altura. O que acontece é que o usuário está vendo o background do div principal, e não as colunas em si. Bom, funciona.

Mas e como resolver quando uma coluna precisa de uma imagem de background com alinhamento pela base?

Aí não tem jeito. O CSS não dá suporte pra isso. A solução é ir para o bom e velho javascript. É só inserir uma rotina que calcula a altura da coluna maior e ajusta as outras duas.

Para quem tem pelo menos um dos neurônios funcionando, é fácil perceber que a altura da maior coluna é justamente a altura do div principal. Então, basta pegar a altura dele e colocar para as três colunas internas e tudo deve funcionar perfeitamente. Segue abaixo o código-fonte:

<div id=”container” style=”margin: 0px; padding: 0px; background-color: #cccccc; width: 408px; display: table”>
<div id=”menu” style=”margin: 1px; padding: 0px; width: 100px; background-color: #ffff00; float: left”>Menu<br>
lateral<br>com<br>cinco<br>linhas</div>
<div id=”content” style=”margin: 1px; padding: 0px; width: 200px; background-color: #ffffff; float: left”>Lorem ipsum<br>
Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</div>
<div id=”NavAux” style=”margin: 1px; padding: 0px; width: 100px; background-color: #00ffff; float: right”>Navegação
direita</div>
</div>

<script>
obj_esq = document.getElementById(‘menu’);
obj_pri = document.getElementById(‘content’);
obj_dir = document.getElementById(‘NavAux’);
obj_container = document.getElementById(‘container’);
altura_pri = parseInt(obj_container.offsetHeight) + ‘px’;
obj_esq.style.height = obj_dir.style.height = obj_pri.style.height = altura_pri;
</script>

Usando filtro alpha com CSS puro

Um dos caras mais feras que conheço (em se tratando de CSS) é o Maurício Samy Silva (mais conhecido por Maujor: http://www.maujor.com/index.php). Por acaso, acabei vendo um tópico no site dele que explicava como fazer filtro alpha em CSS puro, validando o código na W3C. Veja o tópico abaixo:

http://www.maujor.com/tutorial/filtroalpha.php

A questão de usar alpha em CSS sempre foi um problema. Tem um método para fazer isso que funciona no IE, mas não no Mozilla, e vice-versa, e ambos acabam não validando o CSS na W3C. Pouco importa, dizem muitos, o que importa é que funcione, então o que a maioria dos programadores faz (eu, inclusive) é usar os dois hacks juntos e boa.

O Maujor deu uma dica no mínimo interessante… usar um GIF com padrão, em xadrez, intercalando pixels sólidos com transparentes.

Na mesma hora me veio à cabeça a palavra “GAMBIARRA”, não sei por quê. Dei risada sozinho. Acontece que um dia antes eu tinha encontrado uma solução bem parecida para resolver o mesmo problema: usei dois arquivos PNG, um com transparência de 65% e outro de 75% para fazer um menu com efeito de roll-over, de forma que o menu ficasse por cima de uma imagem de fundo, mas não a cobrisse inteiramente.

É 100% CSS, Funciona no IE7, Mozilla, Opera e Netscape, e valida na W3C perfeitamente.

O site em questão está em desenvolvimento, e quando estiver pronto divulgarei aqui.