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.
Total de visitas: 757
Imagem de Terror
(Arraste as Fotos e Clique 2 vezes para ampliar)