Voltar para o site

Layout de 3 colunas em qualquer ordem

Publicado em: 05/06/2006

Autor: Andy Hume
URL do original: https://bitesizestandards....r-columns
Título original: Understanding “Any order columns”
Traduzido com autorização expressa do autor

Troca de colunas em layout CSS

Neste tutorial mostrarei como trocar a posição das colunas laterais em um layout de 3 colunas, usando um código de marcação na seguinte ordem:
coluna principal — main —, coluna de navegação — nav —, e coluna de links — links.

A marcação proposta contém três divs, cada uma com sua id e seu conteúdo, conforme mostrado abaixo.

<div id="main">[...conteúdo ...]</div>
<div id="nav">[...conteúdo...]</div>
<div id="links">[...conteúdo...]</div>

Para começar definirei um largura para cada uma das colunas e flutuarei as três à esquerda. Também incluirei uma regra CSS adicional para corrigir um "bug" no Internet Explorer para Windows.

#main {
    display:inline; /*Bug da margem dupla para floats no IE*/ 
    float:left;
    width:50%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    }

N.T. O autor definiu as larguras das colunas em 50% + 20% + 20% = 90% da largura total disponível

OK. Este é o layout de 3 colunas, mas se quisermos alterar a posição das colunas, teríamos que alterar a ordem que elas aparecem na marcação.

A solução sem tocar na marcação

Nossa primeira proposta é a de alterar a posição da coluna de navegação nav, passando-a para a esquerda de modo que a coluna main fique no centro.
Para isso, defini uma margem esquerda left-margin de 20% para a coluna main com a finalidade de abrir espaço para a coluna nav e depois puxei a coluna nav para a esquerda definindo para ela uma margem negativa left-margin de -70%.

#main {
    display:inline; /*Bug da margem dupla para floats no IE*/ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    margin-left:-70%;
    }
#links {
    float:left;
    width:20%;
    }

Veja o resultado

.

Nossa segunda proposta é a de alterar a posição da coluna de links links, passando-a para a esquerda de modo que a coluna main fique no centro.
Para isso, vamos manter a margem esquerdade 20% para a coluna main, remover a margem esquerda da coluna nav e puxar a coluna links para a esquerda definindo para ela uma margem negativa left-margin de -90%.

#main {
    display:inline; /*Bug da margem dupla para floats no IE*/ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    /* margin-left:-70%; */
    }
#links {
    float:left;
    width:20%;
    margin-left:-90%;
    }

E o novo resultado.

Tudo entendido?
É bem simples e esta técnica dará a você os fundamentos básicos para seus experimentos com projetos multi colunas.

Bibliografia (links para textos em inglês)

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo