Layout 3 Colunas (modo 2)
Layout 3 Colunas (modo 2)
Segundo Modo
A estrutura que utilizaremos para fazer esse layout, nos permitirá, apenas modificando algumas linhas no CSS, criar um layout fluido.
Então, é muito importante que você aprenda e leia atentamente essa etapa.
A estrutra XHTML não será muito diferente da que utilizamos no Modo 1, mudaremos apenas o div#meio de lugar, colocando ele logo abaixo do div#direita.
O resultado, ficará assim:
<div id="geral"> <div id="cabecalho">CABECALHO</div> <div id="esquerda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia.</div> <div id="direita">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia.</div> <div id="meio">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia.</div> <div id="rodape">RODAPE</div> </div>
Tendo a estrutura XHTML construída, vamos agora para o CSS.
Nosso CSS também não mudará muito do CSS usado no Modo 1
Nesse primeiro código, vamos apenas definir tamanhos e bordas para podermos visualizar melhor os objetos da página. O código CSS fica assim:
div { border:1px solid black; }
#geral {width:700px;}
div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ }
Agora, vamos organizar as partes.
Os únicos objetos que usarão float serão as colunas. A coluna da esquerda, usará float:left; e a coluna da direita usará float:right;
Esse é o segredo. Como as duas colunas estão flutuando em lados opostos, e o div#meio não está usando float algum, ele encaixa automaticamente no meio das duas colunas...
div {border:1px solid black; }
#geral {width:700px;}
div#esquerda, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } div#esquerda { float:left; /* Faz a coluna da esquerda flutuar para esquerda */ } div#direita { float:right; /* Faz a coluna da direita flutuar para direita */ }
Ótimo!
Agora, nos resta apenas colocar o div#meio no centro das colunas... Isso se resolve definindo uma margem para a esquerda e para a direita.
Como a largura das colunas é de 150px, vamos colocar margens de 160px, para dar um espaço confortável para o texto.
div {border:1px solid black; }
#geral {width:700px;}
div#esquerda, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ }
div#esquerda {float:left; /* Faz a coluna da esquerda flutuar para esquerda */ }
div#direita {float:right; /* Faz a coluna da direita flutuar para direita */ }
div#meio {margin:0 160px; /* Define uma margem lateral para o div#meio */ }
Voalá! Temos um layout de 3 Colunas!
Se você quiser centralizá-lo, bastar fazer da mesma maneira que fez no Modo 1.
div {border:1px solid black; }
body {text-align:center;} /* Faz todo conteúdo centralizar - PRO IE */ #geral { width:700px; margin:0 auto; /* Faz o layout GERAL centralizar */
text-align:left; /* faz o texto ficar alinhado a esquerda */ } div#esquerda, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } div#esquerda {float:left; /* Faz a coluna da esquerda flutuar para esquerda */ } div#direita {float:right; /* Faz a coluna da direita flutuar para direita */ } div#meio {margin:0 160px; /* Define uma margem lateral para o div#meio */ }
Para terminar, definiremos uma altura para o #cabecalho e para o #rodape.
div {border:1px solid black; }
body {text-align:center;} /* Faz todo conteúdo centralizar - PRO IE */
#geral {
width:700px;
margin:0 auto; /* Faz o layout GERAL centralizar */
text-align:left; /* faz o texto ficar alinhado a esquerda */
}
div#esquerda, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ }
div#esquerda {float:left; /* Faz a coluna da esquerda flutuar para esquerda */ }
div#direita {float:right; /* Faz a coluna da direita flutuar para direita */ }
div#meio {margin:0 160px; /* Define uma margem lateral para o div#meio */ }
div#cabecalho, div#rodape {height:50px;} /* Define uma altura pros divs #cabecalho e #rodape */