Banner propaganda da DevMedia - Cursos de desenvolvimento web

Layout de 3 colunas em qualquer ordem

Publicado em: 05/06/2006

Autor: Andy Hume
URL do original: http://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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo