Layout CSS de 3 colunas - 2^a. Parte

Publicado em: 28/06/2005

[ « 1 ^a. Parte ]

Flutuando as DIV's

Vamos a seguir posicionar as três DIV's, uma ao lado da outra constituindo as três colunas do layout. Vamos também definir um espaçamento entre colunas de 6px através de declaração de margem nas colunas laterais.

Usaremos para isto a declaração CSS float: left;

#principal {
	float:left;
	width:408px;
	background:#fafafa;
}

#nav-sec {
	float:left;
	width: 150px;
	background:#eee;
	margin-left: 6px;
}
#navegacao {
	float:left;
	width: 150px;
	background:#eee;
	margin-right: 6px;
	}
    

Veja os efeitos destas regras nesta página.

OPS! As colunas agora já estão uma ao lado da outra, mas o rodapé subiu e dependendo do navegador usado você vai notar que a #tudo encolheu!

Colocando o rodapé no lugar

Adotamos a solução de flutuar as colunas exatamente para poder manter o rodapé sempre abaixo da coluna mais longa. Isto se consegue declarando para o rodapé clear: both;

#rodape {
	height:50px;
	background:#ddd;
	clear:both;
	}

Veja os efeitos desta regra nesta página.

Agora as coisas voltaram ao seu lugar e a visualização é idêntica em todos os navegadores.

Mas, estamos ainda com um problema que é o de posicionar a coluna principal no meio e as de navegação nas laterais.

Posicionando a coluna principal

Sabemos que a coluna principal deverá ficar posicionada a 156 px da borda esquerda pois terá que abrir um espaço de 150px para a coluna de navegação da esquerda e mais 6px de margem entre elas.

Vamos abrir este espaço com declaração de uma margem esquerda para a coluna principal.

#principal {
	float:left;
	width:408px;
	background:#fafafa;
	margin-left:156px;	
	}

Veja os efeitos desta regra nesta página.

OPS! mais problemas com navegadores ruins. Em navegadores que seguem as Web Standards você verá uma margem de exatos 156px à esquerda e as colunas de navegação uma embaixo da outra na direita.

Navegadores ruins dobraram a margem.
Você verá uma margem de 2 x 156px à esquerda e as colunas de navegação uma embaixo da outra e à esquerda.

Existem vários "hacks" para resolver este problema. Usaremos o abaixo especificado:

#principal {
	float:left;
	width:408px;
	background:#fafafa;
	margin-left:156px;
	display:inline; /* hack navegadores ruins */
	}

Se você está com um navegador ruim, veja os efeitos do hack
nesta página.

Posicionando a coluna esquerda

A coluna esquerda atualmente está posicionada à direita e a uma distância de 720 px da margem esquerda

Vamos atribuir para a coluna de navegação, uma margem esquerda negativa de 720 px e assim "puxarmos" ela à esquerda.

#navegacao {
	float:left;
	width: 150px;
	background:#eee;
	margin-left:-720px;
	}

Veja os efeitos desta regra nesta página.

Finalmente completamos o posicionamento das três colunas conforme nossa intenção inicial.

O box model Hack

Como definimos uma borda de 1px nas laterais da nossa página, o IE5.0 e o IE5.5 destruirão nosso belo layout, pois as citadas bordas serão computadas dentro da largura total da página e a "conta não fechará" para estes navegadores.

Observe: 720 px - 2px (uma borda em cada lado) = 718 px disponível.
150 px + 6px + 408 px + 6px + 150 px = 720 px necessários.

É o conhecido Box Model quebrado e teremos que aplicar um hack para fazer nosso layout perfeito naqueles navegadores.

Vamos aplicar o Tantek Çelik Box Model Hack

#tudo{
	width:722px;
	margin:0 auto;
	text-align:left;
	border:1px solid #c30;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width:720px;
	}
	body>#tudo {
	width:720px;
	}

Veja o layout final com o Box Model aplicado nesta página.
Você somente notará a grande diferença se estiver visualizando com IE5.0 ou IE5.5.

Um toque final

Para finalizar, vamos acresentar umas regras de estilo visando a melhorar a apresentação dos conteúdos.

body {
	text-align:center;
	font:75%/140% Arial, Helvetica, sans-serif;
	background: #fff url(bg.gif) center repeat-y;
	}
	
#principal {
	float:left;
	width: 408px;
	background:#fff;
	margin-left:156px;
	display:inline;	
	text-align:justify;
	}
	
h1{
	font-size: 130%;
	color:red;
	margin-left:5px;
	
}
h2{
	font-size: 120%;
	color:red;
	margin-left:5px;
	}
	
h3{
	font-size: 100%;
	color:black;
	margin-left:5px;
	}
	
 p { 
	color:#333; 
	margin:10px 0;
	}
	
ul,dd,dt {margin-left:5px;}

li { list-style:none;}

Veja o layout> com o toque final nesta página.

Nota: Observe que agora a cor do fundo das colunas laterais ocupa toda a altura da coluna. Isto foi conseguido com uma imagem de fundo para body. Veja a imagem de fundo usada.

O layout nos navegadores

O Opera apresentou um "bug" afastando o rodapé da margem inferior, para cima, em relação a #tudo de uma margem de 10px. Esta foi a margem declarada para todos parágrafos do documento.
Para corrigir este "bug" basta zerar a margem inferior do parágrafo do rodapé.

Sua contribuição: se você visualizou o layout final em condições diferentes das testadas por mim (navegador e/ou sistema operacional) peço informar o resultado, nos "Comentários" e agradeço em nome de todos que se interessarem por este tutorial.
Forneço um screenshot do layout no Firefox, para eventuais comparações.

[ « 1 ^a. Parte ]