Voltar para o site

Layout CSS de 2 colunas - 2a. Parte

Publicado em: 12/08/2005

[ « anterior ] [ próximo » ]

Layout fixo e centrado

Como você deve ter observado, nossa página base tem uma largura fixa e está centrada na tela independente da resolução. A técnica para obter este posicionamento com CSS está descrita com detalhes neste tutorial

Para centrar a página vamos criar uma DIV que chamaremos de #tudo e que englobe toda a marcação, vale dizer, que englobe o elemento body e a seguir adicionar as regras de estilo para centrar nossa página sem estilos.

Veja a seguir os acréscimos na marcação.

...............
<title>Meu blog Standard</title>
<style type="text/css">
body {
text-align:center;
}

#tudo {
width:720px; 
margin: 0 auto; 
text-align:left;
border:2px solid #000; 
/* coloquei uma borda provisória para 
facilitar a visualização */
} 
</style>
</head>
<body>
<div id="tudo">
...Conteúdo da página ...
</div>
</body>
</html>

Veja o efeito destas regras na página base.

Margens e fontes

Nosso próximo passo será definir a cor e o tamanho da fonte para a página em geral bem como zerar as margens e padding de body igualando as margens padrão para todos os navegadores.

Veja a seguir os acréscimos destas regras 

...............
<title>Meu blog Standard</title>
<style type="text/css">
body {
text-align:center;
margin:0; 
padding:0; 
font: 80% Arial, Helvetica, sans-serif; 
color:#800000;
}
...
</style>

Veja o efeito destas regras na página base.

As áreas do layout

Nosso próximo passo será definir as DIVs para cada uma das áreas do layout a saber:

topo - #topo;
coluna secundária de links - #secundaria;
coluna do conteúdo principal - #principal;
rodapé - #rodape.

Veja a seguir os acréscimos na marcação e na folha de estilos. 

...............
<title>Meu blog Standard</title>
<style type="text/css">
.........
#topo {
height:150px; 
background:#2a7d00; 
color:#fff; 
}
#secundaria {background:#d1c9ab;}
#principal {background:#fff6d1;}
#rodape {background:#2a7d00; color:#fff;}
</style>
</head>
<body>
<div id="tudo">

<div id="topo">
Título do site  e busca
</div>

<div id="secundária">
Perfil,Recente,Arquivo,Blogroll,Parceiros
</div>

<div id="principal">
Comentários
</div>

<div id="rodape">
Rights e Selos
</div>

</div>
</body>
</html>

Veja o efeito destas regras na página base.

Posicionando as colunas

Vamos a seguir posicionar as colunas, uma ao lado da outra.
Adotaremos para a coluna secundária uma largura de 220px e para a principal 500px que somados resultam em 720px que foi a largura estabelecida para a página.

Usaremos a propriedade float com o valor left.
Declarar float para para várias DIVs em sequência faz com elas "flutuem" como se fossem balões de gás até atingir o 'teto' que é demarcado pelo fundo do(s) elemento(s) que as antecede. As DIVs flutuadas vão se posicionando uma ao lado da outra até que a soma de suas larguras não ultrapasse a largura total disponível no "teto". A partir daí, começa outra camada abaixo da anterior e assim sucessivamente.

Imagem mostrando a regra CSS float left

Para a nossa página base "flutuaremos" apenas duas DIVs; #secundária e #principal e elas iram tocar o elemento que as antecede no código e que é a DIV #topo, exatamente o que pretendemos. Como adotamos uma largura total para a página de 720px vamos estabelecer a larguras das duas DIVs em #secundaria = 220px e principal = 500px.
A soma 220px + 500px = 720px e elas ficarão uma ao lado da outra ocupando toda a largura página.

Alerta: Navegadores não complacentes com as Web Standards costumar adotar comportamento estranho com relação a eventuais margens em elementos flutuados e uma série de outros "bugs" mais complexos em floats.

Vamos também nesta fase, retirar a borda provisória de 2px que havíamos colocado anteriormente para fins de facilitar a visualização. Se você não tirar a borda, a largura para "flutuar" será de 720px - 2px - 2px = 716px e a segunda DIV flutuada irá para baixo da primeira, por não haver largura suficiente para as duas.

Para fazer com que o rodapé permaneça abaixo da coluna mais comprida, seja ela a #secundária ou a #principal, devemos declarar float:both para o rodapé.

Veja a seguir os acréscimos na folha de estilos. 

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#tudo {
width:720px; 
margin: 0 auto; 
text-align:left;
/* border:2px solid #000; */
/* coloquei uma borda provisória para 
faciliatar a visualização */
} 
#secundaria {
width:220px;
float:left;
background:#d1c9ab;
}

#principal {
width:500px;
float:left;
background:#fff6d1;
}

#rodape {
background:#2a7d00; 
color:#fff; 
clear:both;
}
..............

Veja o efeito destas regras na página base.

Estudos adicionais

Sugiro que você copie para seu HD o código fonte da página base que acabou de visualizar e faça algumas experiências para entender o funcionamento das regras float:left; - clear:both; e outras a sua escolha.
Altere as regras de estilos e veja o resultado no navegador.
A seguir sugestões para você alterar. Mas, atenção, altere os itens sugeridos na cópia original, um de cada vez, ou seja, altere, salve o original com outro nome e vizualize. Repita para cada alteração sugerida.

  • aumente width das colunas, uma de cada vez;
  • diminua width das colunas, uma de cada vez;
  • retire clear:both do rodapé;
  • tire conteúdo da coluna principal fazendo com que ela fique menor que a secundária e repita as três alterações acima;
  • e outras a sua escolha.

Nota: As vizualizações diferem conforme o navegador usado. Os mozillas, e outros navegadores standards, interpretam corretamente as regras, mas o IE interpreta à sua maneira. No final faremos as visualizações idênticas, com uso de alguns poucos "hacks" simples.

[ « anterior ] [ próximo » ]

Conheça os livros do Maujor®

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

topo