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 esquerda, de largura fixa, que pode ser usada para menu de atalhos, índice, informações adicionais etc.

Colunas e faixas em CSS

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.


No atual padrão de HTML, não existe ainda recurso para distribuir automaticamente o conteúdo da página em colunas. Uma solução é criar manualmente duas regiões (DIV) e formatá-las adequadamente em CSS para que sejam apresentadas como duas colunas lado-a-lado. Outra solução seria recorrer ao uso de uma tabela com uma linha e duas colunas.

A coluna da direita fica aqui, ocupando o restante da largura da janela.

No BODY, com um pouco de engenhosidade, definimos a aparência básica para o preenchimento de fundo das duas colunas. A vantagem de definir um fundo em duas colunas de cor através do BODY é que ele preenche de maneira uniforme toda a extensão vertical da página, independente do comprimento ocupado pelo conteúdo de cada coluna. Este BODY tem as seguintes características de estilo CSS:
margin: 10px;
Margens à volta da página fixas, de 10 pixels cada. A definição de valor explícito e arbitrário para a margem do documento, ao invés de deixar o navegador definir uma margem padrão, tem como objetivo permitir o controle preciso, principalmente quando for desejado suprimir alguma das margens como neste caso.
background: #FFFFF0 url(img/fundo_col_direita.png) repeat-y;
O fundo do documento define a aparência do fundo das duas colunas: uma cor sólida para o fundo da maior da página (usado aqui o bege claro #FFFFF0), acrescida de uma imagem repetida apenas na vertical (eixo Y), que fica exibida por sobre a cor sólida e define assim a largura (fixa) e aparência do fundo da coluna esquerda. Neste caso, a imagem mede 150×1 pixels e consiste apenas em uma cor sólida (cáqui escuro).
Um DIV inicial define uma faixa de topo sem margem com os limites da janela, definindo para isto os seguintes estilos CSS:
margin: -10px -10px 0 -10px;
Margens (dadas começando da superior e seguindo no sentido horário) superior, direita e esquerda, que divisam com as margens do próprio documento, negativas no mesmo valor que as margens do BODY, ou seja, -10 pixels. Apenas a margem inferior, que divisa com o restante do conteúdo do documento, fica inalterada em zero.
padding: 0 10px;
Se desejado, um padding (margem interna) pode dar um espaçamento entre o conteúdo dentro da faixa de topo e as bordas da janela, para compensar a ausência de margens. Aqui foi definida margem interna lateral de 10 pixels.
background: green;
Foi definida uma cor de fundo sólida verde neste exemplo.
Outro DIV em seguida define uma faixa horizontal ideal para um menu, usando estes estilos CSS:
margin: 0 -10px;
Margens verticais nulas (zero), não interferindo na faixa de título acima nem no restante do conteúdo abaixo; e margens laterais negativas em -10 pixels, anulando as margens do documento.
background: silver;
Foi definida uma cor de fundo sólida cinza neste exemplo.
Um terceiro DIV, este flutuante à esquerda, define o conteúdo da coluna esquerda e sua largura. Para isso, possui os seguintes estilos CSS:
float: left;
Torna o bloco flutuante à esquerda.
width: 130px;
Define uma largura fixa, que deve ser condizente com a largura da imagem que define seu fundo, no BODY, e com a margem de espaço reservado para ela deixada no DIV seguinte da coluna direita. Como o documento define a margem esquerda de 10 pixels e a imagem de fundo tem largura 150 pixels, restam 140 pixels de área utilizável; definimos então a largura da coluna em 130 pixels para restar também uma distância de 10 pixels à direita da coluna, de forma que o conteúdo desta coluna esquerda fica simétrico à imagem de fundo na horizontal.
background: #999900;
Foi definida uma cor de fundo sólida #999900 neste exemplo (um pouco mais clara que a cor da imagem aplicada no fundo do BODY), apenas para deixar visível a área efetivamente ocupada pelo DIV.
O quarto e último DIV que compõe a estrutura básica do texto em duas colunas define agora a coluna direita, ocupando o restante da largura da janela do documento. Define apenas este estilo CSS:
margin-left: 150px;
Define uma margem à esquerda do bloco em 150 pixels, que se soma à margem de 10 pixels já existe do documento (BODY). Estes 150 pixels acomodam: a largura de 130 pixels da coluna da direita, mais 10 pixels que servem de margem direita da primeira coluna (até o fim da imagem de fundo), mais uma distância de 10 pixels que forma uma margem esquerda efetiva para esta segunda coluna.

Como exercício, experimente acrescentar uma faixa final de rodapé, após o conteúdo das colunas principais.

Exemplos adicionais


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.