Colunas e faixas em CSS: Exemplo mais simples

Márcio d'Ávila, 12 de outubro de 2004. Revisão 1, 9 de julho de 2005.
Categoria: Internet: Cliente: DHTML

Como aplicar corretamente estilos CSS para definir áreas do conteúdo (definidas com elementos DIV) como colunas e faixas, sem recorrer ao uso de tabelas. Estes exemplos definem um leiaute em duas colunas, acrescido de uma faixa de topo e outra faixa horizontal logo abaixo, demonstrando boas práticas e técnicas de uso de estilos CSS.


Coluna da Esquerda

A seguir, é apresentado um ”esqueleto“ do código HTML, incluindo os estilos CSS, para este exemplo simples de página que define duas colunas de largura similar.

<html>
<head>
<style type="text/css">
div#colunaEsquerda {
    float: left;
    width: 49%; // 1% de folga entre as colunas
    padding-right: 1em;
}
div#colunaDireita {
    margin-left: 50%;
    padding-left: 1em; // distância à esquerda
}
</style>
</head>

<body id="duasColunas">

... cabeçalho sem colunas ...
tudo antes do DIV da coluna esquerda

<div id="colunaEsquerda">

... conteúdo da esquerda ...

</div>
<div id="colunaDireita">

... conteúdo da direita ...

</div>

... rodapé sem colunas ...
tudo após o DIV da coluna direita

</body>
</html>

Coluna da Direita

Este exemplo simples define regiões DIV consecutivas e as formata, em CSS, para serem exibidas em duas colunas, esquerda e direita, cada uma ocupando metade da largura (50%) da página.

Todo conteúdo que estiver na página antes do primeiro DIV, que define a coluna da esquerda, será exibido antes das duas colunas ocupando toda a largura da página. Nesta região do HTML, entre o body e o div id="colunaDireita", deve ser usada como texto de cabeçalho ou topo da página. Neste exemplo, estão no topo o título principal da página, autor, data e categoria, parágrafo de resumo e a linha horizontal hr.

No primeiro DIV que define a coluna da esquerda, foi colocado neste exemplo um quadro que exibe o “esqueleto” do código HTML — incluindo os estilos CSS — para a estrutura deste exemplo. E neste DIV seguite que define a coluna da direita, está todo o texto explicativo que você está lendo. Para mais detalhes, exiba o código-fonte desta página.

Os estilos CSS usados são poucos. A coluna da direita define uma margem esquerda de 50% da largura total da página, deixando assim espaço para comportar a coluna da esquerda. A coluna da esquerda por sua vez tem como principal característica de estilo a propriedade de flutuar à esquerda da página (float: left), o que faz com que ela fique posicionada em paralelo com a coluna da direita que se segue. O estilo da coluna da esquerda também define sua largura em 49% do total da página, deixando portanto 1% da largura total da página como distância entre as colunas. Para uma garantia adicional de separação entre as colunas, também foi definido um afastamento interno (padding) à esquerda no estilo da coluna direita em uma letra (1em).

Tudo que estiver depois do final do segundo DIV será exibido imediatamente após a coluna da direita, que não é flutuante. Porém, um aspecto importante: se a coluna da esquerda ocupar um comprimento vertical maior que o da direita, o DIV flutuante da coluna esquerda “empurra” o texto a seguir, até completar o comprimento da coluna flutuante.

Se for desejado um rodapé após as colunas ocupando toda a largura da página, é importante portanto que a coluna flutuante seja a mais curta das duas. Infelizmente, nem sempre é simples ou mesmo possível determinar isto de forma absoluta, uma vez que o comprimento das colunas pode variar em função da largura total da página.

No exemplo atual, em resoluções até 1024×768 pixels onde a janela do navegador esteja maximizada, esta coluna da direita deve ocupar um comprimento vertical maior. Porém, em resoluções superiores, o texto pode acabar acomodado em um comprimento menor que o da coluna esquerda (que, por apresentar código pré-formatado, tem um comprimento fixo). Nesta situação, o DIV da coluna esquerda flutuante ficaria com comprimento maior e empurraria o texto do rodapé. A única solução garantida para preservar o texto após as colunas, neste caso, seria não utilizar DIVs com CSS como aqui, mas sim recorrer ao uso de uma tabela para simular as colunas.

Retornar para o exemplo inicial de Colunas e Faixas em CSS.


Firefox - A web de volta
Creative Commons License

© 2003-2007, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.