Construção CSS com três colunas

Vejamos como fazer uma página, construída unicamente com Folhas de Estilo em Cascata, composta por três colunas. Com desenho de largura fixa e fluida.
Por Miguel Angel Alvarez - Tradução de JML



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;
}