CriarWeb.com > Manuais > Workshop de CSS

Continuando nosso workshop de CSS, vamos ver agora como fazer uma estrutura de três colunas para uma página web. Esta é uma estrutura bastante típica de portal. Em uma das três costuma se situar a barra de navegação, na outra o conteúdo e na última, uma série de banners com promoções.

Seria bom ver o resultado que buscamos em uma página a parte.

Este artigo vai presupor que o leitor já compreende construção com CSS e que leu o artigo Contrução CSS com duas colunas. Vamos nos basear neste artigo para compor a página com CSS com três colunas.

Em linhas gerais, a possibilidade que vamos explorar a seguir para cosntruir uma web com três colunas, consiste no seguinte: Colocaremos a coluna da esquerda flutuando à esquerda, a coluna da direita flutuando à direita e por último colocaremos a parte principal, que aparecerá no centro da página.

O código HTML para fazer este exemplo será o seguinte:

<div id="container">
    <div id="cabecalho">
       Cabecalho 01
    </div>
    <div id="corpo">
       <div id="lateral">
          <ul>
             <li><a href="#">Link 1</a>
             <li><a href="#">Vínculo 2</a>
             <li><a href="#">Outro link</a>
             <li><a href="#">Link maneiro</a>
             <li><a href="#">Mais links</a>
             <li><a href="#">Outro último</a>
          </ul>
       </div>
       <div id="otrolado">
          <img src="bannerlateral.gif" width="120" height="600" alt="">
       </div>
       <div id="principal">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
          ...
       </div>
    </div>
    <div id="rodape">
       © 2006 CriarWeb.com
    </div>
</div>

Vemos que a página contém três partes, o cabeçalho, o corpo e o rodapé. O cabeçalho e o rodapé serão colocados no documento ocupando toda a largura disponível. A parte onde colocaremos as três colunas é o corpo.

Dentro do corpo, como podemos ver, temos três camadas. A camada "lateral", que é a que pensamos colocar à esquerda. Logo está a camada "outrolado", que é a que planejamos colocar à direita. Por último está a camada "principal", que é a parte central. A camada "principal" aparecerá no centro, porque os dois lados estarão ocupados pelas camadas laterais.

O CSS que vamos utilizar para construir isso será o seguinte. É muito parecido ao exemplo de construção CSS co duas colunas. Logo o comentaremos.

BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ebebeb;
}
#container{
    text-align: left;
    width: 770px;
    margin: auto;
}
#cabecalho{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
}
#corpo{
    margin: 10 0 10 0px;
}
#lateral{
    width: 160px;
    background-color: #999999;
    float:left;
}
#lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
#lateral li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
}
#lateral a{
    color: #3333cc;
    text-decoration: none;
}
#outrolado{
    width: 120px;
    float: right;
}
#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
}
#rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
}

Teremos um container, de 770 píxels (px) de largura, que é onde vamos colocar todas as camadas. Centraremos em explicar a zona do corpo, que é onde aparecerão as três colunas.

Vemos como a camada "lateral" tem definido uma largura de 160 px, e um float: left; para que flutue à esquerda. Vemos logo como a camada "outrolado" tem 120 px de largura e flutua à direita.

Logo vemos a camada "principal", que tem uma margem à esquerda de 170 px, para deixar um espaço vazio em relação à camada "lateral". 170 px porque a camada "lateral" ocupa 160 px de largura, mais 10 px que é o que realmente estamos colocando de margem. Na camada "principal" também definimos uma largura de 460 px, para que ocupe justamente o espaço vazio que fica no centro.

Pode-se ver o exemplo em funcionamento em uma página a parte.

Desenho fluido

Os desenhos fluidos são os que se ajustam à largura que tenhamos na janela do navegador. No exemplo anterior o desenho tinha uma largura fixa de 700 píxels e agora vamos fazer duas modificações para que o desenho se ajuste à janela do navegador.

Simplesmente teremos que tirar a definição de largura da camada "container".

#container{
    text-align: left;
    margin: auto;
}

Logo, também tiraremos a definição de alargura da camada "principal" e acrescentaremos o atributo margin-right: 130px; para que a camada com o conteúdo central tenha uma margem em relação à camada que fica à direita. E 130 px porque a camada da direita ocupava 120 px, mais 10 px que é realmente a margem que estamos deixando.

#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    margin-right: 130px;
}

Podemos ver o exemplo em uma página a parte.