Esta é a área de topo. Ela tem margens (externas) negativas acima, à esquerda nem à direita, anulando a margem da página para ficar rente à borda da janela. Tem também magem interna (padding) nas laterais para afastar o texto da borda.
Ideal para barra de título na forma de um banner.
Esta é uma área adequada para um menu horizontal, anulando as margens esquerda e direita da página.
Aqui fica a coluna da direita, de largura fixa. Por ser flutuante, esta coluna deve ser inserida no fonte HTML antes da coluna à esquerda que se segue, para que ambas fiquem alinhadas no topo.

Colunas e faixas em CSS: Texto à Esquerda

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.


Agora, a coluna da esquerda ocupa a maior parte da largura da janela, deixando à direita uma coluna de largura fixa.

Invertem-se as definições de estilo CSS entre as colunas esquerda e direita, assim:

div#colunaEsquerda {
	margin-right: 150px;
}

div#colunaDireita {
	float: right;
	width: 130px;
	background: #999900;
}

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


Firefox - A web de volta
Creative Commons License

© 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.