CSS: Distância entre Colunas

Recebo sempre emails com pedidos de ajuda sobre colunas, principalmente dúvidas de como ajustar as colunas de forma que fiquem com distância equilibrada. No artigo Float, Clear e as Colunas do Blogger passei uma idéia das propriedades "float" e "clear", mas acho que ainda falta um aprofundamento no assunto.



Sempre que desejamos 3 colunas, seja no Header, Main, Footer, etc, precisamos utilizar a propriedade "float".

Há 2 opções:
- Flutuar 2 colunas à esquerda e 1 coluna à direita;
- Flutuar as 3 colunas à esquerda.

Vamos ver a primeira opção

2 colunas com float: left e 1 coluna com float: right

Supondo que você tenha um container (Header, Main, Footer, etc) de 960px de largura. Dividindo esse valor por 3, terá o espaço de 320px para cada coluna. Usando esse valor, uma das colunas poderá escorregar para debaixo das outras, porque um mínimo padding, ou uma borda, que houver em qualquer elemento irá superar os 960px de largura. Ou, se a margin e o padding estiverem zerados, tudo ficará colado, sem espaço entre as colunas. Sendo assim, você precisa de um valor menor que 320px para cada uma das 3 colunas. E então surge o problema - a distância entre elas pode não ficar igual.

Isso ocorre porque 2 das colunas irão procurar a margem extrema da esquerda e 1 coluna irá procurar a margem extrema da direita do container.


Nessa situação, você deve aplicar uma margin para que a distância entre a primeira coluna e a segunda fique igual à distância entre a segunda e a terceira.

Como calcular a margem ideal?
Em nosso exemplo do container de 960px, vamos supor que você tenha escolhido a medida de 315px de largura para cada coluna e que exista uma borda de 1px ao redor das 3 colunas e nenhuma margin ou padding.

Temos:
315px de largura x 3 = 945px
1px de borda de cada lado de cada coluna = 6px
Total = 951px
Sobra: 960px - 951px = 9px (essa é a distância que está entre a segunda e a terceira coluna)

Se você dividir essa "sobra" por 2 e aplicar como margin entre a primeira e a segunda coluna você resolve o problema.

Exemplo do código para o outer-wrapper:

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 4.5px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
float: right;
width: 315px;} 

Se você quiser as duas colunas dos extremos (primeira e terceira colunas) descoladas das margens do container, use a "sobra" para fazer esse distanciamento e recalcule a margem necessária entre a primeira e segunda colunas.

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 3px;
margin-left: 3px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
margin-right: 3px;
float: right;
width: 315px;} 

As 3 colunas com float: left

Usando essa opção, as 3 colunas irão procurar a margem esquerda do container, sobrando um espaço na margem direita.


A "sobra" continua sendo de 9px, portanto precisamos dividir essa medida para distanciar uma coluna da outra. Aplicamos então margin-right na primeira coluna (distanciando a primeira da segunda) e margin-left na terceira coluna (distanciando a terceira da segunda):

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 4.5px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
margin-left: 4.5px;
float: left;
width: 315px;}