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>

Essa entrada foi postada em Sábado, Março 1st, 2008 às 10:26 pm sob a(s) categoria(s) Noticias. Você pode acompanhar as respostas desse post através do RSS 2.0feed. Você pode responder, ou rastrear de seu próprio site.

2 Respostas para “Layout de três colunas com alturas iguais em CSS”

  1. Flavio Tubino Disse:
    14/03/2008 às 8:04 pm | Responder

    Respondendo a dúvida do Clodoaldo:

    Para colocar outros divs na coluna da direita, basta inserir eles, um depois do outro, sem grilo nenhum, basta não usar ‘float:left’ nos boxes:

    este é meu boxEste é meu texto
    este é meu boxEste é meu texto
    este é meu boxEste é meu texto

    No arquivo css, modifique o formato dos boxes à vontade. Lembre-se que CSS quer dizer ‘Cascading Style Sheet’, ou seja, dentro de um estilo você define outros estilos, em cascata, assim:

    #box_1{
    color:#ccc;
    padding:5px;
    margin:5px;
    }

    #box_1 h1{
    font-size:12px;
    font-weight:bold;
    color:red;
    }

    #box_2 h1{
    font-size:14px;
    font-weight:normal;
    color:blue;
    }

    etc, etc.

    Uma dica: para fazer aquela barra azul dos cabeçalhos dos boxes, use:
    #box_1 h1{
    background-color:#ccc; /* troque este valor pela cor azul desejada */
    padding:3px;
    width:100%;
    display:block;
    }

    Espero ter ajudado a resolver sua dúvida.

  2. Joaz Soares Disse:
    27/07/2008 às 2:27 am | Responder

    Parabens pelo post, infelizmente as vezes temos que recorrer ao bom e velho javascript para solucionarmos problemas que nem deveriamos esquentar a cabeça! me foi util a solucao.

    sugestao: deixe o codigo identado pra ficar mais compreensível =)

Deixe uma resposta