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.
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>
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.
© 2003-2020, 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.