Primeiro, clique aqui para ver o efeito real da operação. Esta página pode ser centralizada e altamente adaptável nos navegadores Mozilla, Opera e IE. Vamos analisar o código:
Código completo
<html>
<cabeça>
<style type="texto/css">
corpo{
plano de fundo:#999;
alinhamento de texto:centro;
cor: #333;
família de fontes: arial, verdana, sans-serif;
}
#cabeçalho{
largura:776px;
margem direita: automático;
margem esquerda: automático;
preenchimento: 0px;
fundo: #EEE;
altura:60px;
alinhamento de texto: esquerda;
} #conter{
margem direita: automático;
margem esquerda: automático;
largura: 776px;
} #mainbg{
largura:776px;
preenchimento: 0px;
plano de fundo: #60A179;
flutuar: esquerda;
}
#certo{
flutuar: certo;
margem: 2px 0px 2px 0px;
preenchimento:0px;
largura: 574px;
plano de fundo: #ccd2de;
alinhamento de texto: esquerda;
}
#esquerda{
flutuar: esquerda;
margem: 2px 2px 0px 0px;
preenchimento: 0px;
plano de fundo: #F2F3F7;
largura: 200px;
alinhamento de texto: esquerda;
}
#rodapé{
claro: ambos;
largura:776px;
margem direita: automático;
margem esquerda: automático;
preenchimento: 0px;
fundo: #EEE;
altura:60px;}
.text{margem:0px;preenchimento:20px;}
</estilo>
</head>
<corpo>
<div id="header">cabeçalho</div>
<div id="conter">
<div id="mainbg">
<div id="direita">
<div
class="text">direita<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="esquerda">
<div class="text">esquerda</div>
</div>
</div>
</div>
<div id="footer">rodapé</div>
</body>
</html>
Em seguida, defina as duas colunas do meio #right e #left. Para centralizar as duas colunas do meio, aninhamos uma camada #contain fora delas e definimos margin:auto como contains, para que #right e #left fiquem naturalmente centralizados.
Preste atenção na ordem de definição das duas colunas do meio. Primeiro definimos #right e deixamos flutuar no lado direito da camada #contain através de float: right;. Em seguida, defina #left e deixe-o flutuar à esquerda da camada #right através de float: left;. Isto é exatamente o oposto da ordem em que definimos a tabela da esquerda para a direita (Correção: esquerda primeiro e depois direita, ou primeiro direita e depois esquerda, você pode projetá-la de acordo com suas necessidades).
Vemos que há uma camada #mainbg aninhada entre #contain e as duas colunas do código. Para que serve essa camada? Esta camada é usada para definir o plano de fundo de #contain. Você certamente perguntará: por que não definir o plano de fundo diretamente em #contain, mas adicionar outra camada? Isso porque o fundo definido diretamente em #contain não será exibido no mozilla, e o valor da altura deverá ser definido. Se um valor de altura for definido, a camada #right não poderá ser dimensionada automaticamente de acordo com o conteúdo. Para resolver os problemas de fundo e altura, é necessário adicionar uma camada #mainbg. O truque é definir float: left; para a camada #mainbh, porque float fornece automaticamente os atributos de largura e altura da camada. (Vamos entender desta forma por enquanto :)
Finalmente, defina a camada #footer na parte inferior. A chave para esta definição é: clear:both;. A função desta frase é cancelar a herança flutuante da camada #footer. Caso contrário, você verá #footer exibido próximo a #header em vez de abaixo de #right.
Uma vez definidas as camadas principais, o layout está pronto. Um ponto adicional: você viu que também defini um .text{margin:0px;padding:20px;}. A função desta classe é criar uma margem de 20px ao redor do conteúdo. Por que não definir margem ou preenchimento diretamente em #right Como o Mozilla e o IE têm interpretações inconsistentes do modelo de caixa CSS, a definição direta de margem/preenchimento causará deformação no layout no Mozilla. Normalmente resolvo o problema colocando outra camada dentro.