Layout três colunas com igual altura, sem utilizar hacks

Criar um layout com três colunas de mesmo tamanho (que se acompanham), utilzando CSS não é uma tarefa das mais fáceis. Este tutorial exibe o problema que ocorre com layouts de multiplas colunas, e então exibe uma solução simples, que irá funcionar muito bem em todos os navegadores com suporte a CSS.

O método exibido aqui não faz uso de javascript, hacks ou imagens. Isto faz com que ele possa ser utilizado em praticamente qualquer tipo de website desejado, por mais restrito que seja a necessidade.

O problema com colunas de mesma altura

No exemplo acima nós temos três colunas, cada uma com um diferente conteúdo. Você irá notar que o problema ocorre, por que a cor do fundo acompanha o conteúdo (primeira figura). Isto impede que as cores de fundo, de todas as colunas fiquem alinhadas, conforme desejamos (segunda figura).

Este é o problema que nós queremos resolver. Como fazer todas as colunas terem a mesma altura? Ou ainda mais especificamente: Como fazer para todas as colunas terem a mesma altura da coluna mais alta? Isto é difícil de fazer, pois em situações de conteúdo dinâmico, nunca saberemos previamente qual é a coluna mais alta, e qual será sua altura. Nós não podemos simplesmente informar um valor bem alto a todas as colunas, por que isto deixará o layout com um espaço vazio enorme no final das colunas se elas tiverem pouco conteúdo, e se elas tivererm conteúdo maior que o valor estipulado, esta técnica então não irá funcionar. Além do mais, devemos lembrar que nada é fixo na web. Pessoas acessam com diferentes resoluções e de diferentes dispositivos, navegadores, sistemas operacionais, e configurações que irão afetar o tamanho da altura do nosso conteúdo.

Separando o conteúdo da coluna da sua cor de fundo

O primeiro passo para resolver o problema das colunas com o mesmo tamanho é separar nosso quebra cabeças em pequenas peças, para que possamos resolver separadamente. O caminho para fazer isto é que iremos usar duas divs para cada coluna, no lugar de uma. Estas duas divs serão usadas, uma para o conteúdo e outra para a cor de fundo, em cada coluna. Esta separação nos dará um controle maior sobre estes elementos, de forma que poderemos manipular a todos de uma forma bem melhor. Com esta dica, você já deve conseguir enchergar as coisas um pouco mais claramente.

Uma div container com atributo float, irá sempre ter a altura do seu conteúdo

Este é o principio central por detrás do nosso método. O único caminho para fazer a altura da div igual a coluna mais alta é se esta div for um container para todas as divs de conteúdo. Explicando melhor: Colocando as colunas dentro de um container, nós iremos fazer que este container tenha a mesma altura da coluna mais alto. Esta é uma estrutura muito útil.

HTML da estrutura de 3 colunas

No exemplo acima, o conteúdo das 3 colunas estão dentro de um div container.

<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>

Css da estrutura de 3 colunas

E aqui o CSS que força o container div para usar a altura da coluna mais alta.

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

Para esta estrutura funcionar corretamente em todos os navegadores, o container div deverá usar o atributo float (esquerda ou direita) e cada coluna de conteúdo também deverá usar float, caso contrário não irá funcionar muito bem. Este processo de usar float com as divs faz com que elas se alinhem horizontalmente através da página. Flotoar o container faz com que ele tenha a altura exata do seu conteúdo, que no caso é a altura da div mais alta.

Adicionando containers aninhados

O próximo passo em nosso tutorial é adicionar containers que ficarão aninhados, um dentro do outro. Nós precisamos ter tantos containers quanto colunas. No nosso caso, 3 colunas, usaremos então 3 containers. Estas três containers serão usados para a cor de fundo de cada coluna. Note que iremos remover a cor de fundo das colunas originais, e iremos adicioná-las aos containers.

HTML da estrutura de 3 colunas

Os dois extra containers foram adicionados ao nosso html.

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>

CSS da estrutura de 3 colunas

Todos os elementos estão usando float, para a esquerda e os containers tem uma largura de 100% para que eles utilizem todo o tamanho da página. A cor de fundo foi removida das colunas, e então adicionada aos containers.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo os containers usanto postion relative

Usando posicionamento relativo nós agora movemos os containers para seu novo local. Quando cada container é movido, outro container fica visível. Com isto podemos mover cada camada para seu local, para podermos criar o layout com 3 colunas de mesma altura. O container2 div é movido 30% para a esquerda para revelar o verde do container 1. Este movemos 40% para a esquerda, para exibir o amarelo da coluna entral e ao mesmo tempo a sessão vermelha que ainda está visível na coluna da esquerda.

O CSS com o posicionamento relativo

Aqui está o CSS já utilizando o posicionamento relativo.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo o conteúdo de volta para o seu lugar

A próxima coisa a fazer é mover cada conteúdo de cada coluna de volta a página, para que este fique alinhado a sua cor de fundo. Novamente, isto é feito de maneira simples, utilizando posicionamento relativo.

E então, finalmente nós adicionamos um overflow:hidden no container 3.

O CSS com o posicionamento relativo

Abaixo o CSS com o posicionamento relativo e com a regra de overflow. Observe que a regra position:relative, no container 3, é para resolver um bug do internet explorer que impediria o overflow:hidden de funcionar.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

Adicionando padding as colunas

A última coisa a fazer é adicionar padding para as colunas para que o texto não grude na borda de cada coluna. Se nós adicionarmos um CSS padding para as colunas, isto poderá funcionar em alguns navegadores, e em outrod não. Internet Explorere entende errado o box model, e isto calcula a larguda de um elemento com padding de maneira diferente. Um box com 200 pixels de largunra e 20 pixels de pading irá ter um total de 200 pixels no internet explorer, porém em todos os outros navegadores o total será 240 pixels. Padding, deveria ser adicionado para a largura de um elemento, e não subtraido dele. MALDITA MICROSOFT!

Mas não se preocupe… nõs podemos resolver este problema utilizando um caminho diferente, que não irá utilizar regras padding no css. No lugar disto, faremos nossas colunas menores (a coluna irá ser menor em ambos os lados) e então iremos movê-las na direção correta utilizando posicionamento relativo. Em nosso exemplo, iremos usar 2% de padding (ou pseudo-padding), então a coluna que tem 30% irá ser reduzida a 26%. A coluna com 40% irá se reduzir a 36%. Quando movermos as colunas de volta para o seu lugar usando posicionamento relativo nós precisaremos lembrar que as colunas agora são menores, e que estão todas a esquerda. Precisamos movê-las agora para o lugar desejado.

O CSS Completo e definitivo

Para manter o layout em pequenos tamanhos de largura, eu também adicionei um overflow:hidden para cada coluna. Isto irá impedir a coluna de interferir com o resto do layout. Novamente, isto somente é um problema com o internet explorer, todos os outros navegadores mantem o layout correto sem precisar de utilizar este atributo.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Bem, isto é tudo. Eu espero que você possa ter achado útil este artigo. Brinque um pouco com este css, e veja como ele trabalha por você mesmo. Você pode ter mais colunas, lembrando sempre de usar o mesmo número de colunas e containers.

Este artigo é uma versão em português de:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks