Hoje vou mostrar um exemplo prático e explicar como montar um layout de três colunas com css.
O layout fica semelhante a esse abaixo:
HTML
Primeiramente vamos fazer a estrutura do html.
Dentro da tag [body], vamos colocar uma div que vou definir com id=”site” que vai representar todo o conteudo do nosso layout.
Depois vamos acrescentar dentro dessa div#site uma div representando o topo div#topo, uma representando o conteudo div#conteudo (dentro dela vai as colunas) e mais uma pro rodape div#rodape.
Dentro da div#conteudo vamos acrescentar uma para o lado direito div#direita, uma para o meio div#meio, uma para o lado esquerdo div#esquerda, e depois uma div com um style clear: both; (pra fazer a div#conteudo descer até o final)
<html> <head> <title>Layout de 3 colunas</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="site"> <div id="topo">div#topo</div> <div id="conteudo"> <div id="esquerda">div#esquerda</div> <div id="meio">div#meio</div> <div id="direita">div#direita</div> <div style="clear: both;" /> </div> <div id="rodape">div#rodape</div> </div> </body> </html>
CSS
*: vamos dar um “margin: 0 auto;” para a pagina toda (isso vai deixar a pagina centralizada).
body: vamos definir “background: #161616;” (um fundo para a pagina).
div#site: vamos definir 900px de largura e vamos dar uma margem no topo de 10px
div#topo: vamos definir 900px de largura, uma altura de 100px e colocar uma cor #444239.
div#conteudo: essa div vai segurar as três colunas, vamos deixar essa div com 900px de largura e colocar um background: #EE922E;
div#esquerda: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left e colocar uma cor #EE922E.
div#meio: vamos definir 600px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#esquerda formando a segunda coluna) e colocar uma cor #F8F3DF.
div#direita: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#meio formando a terceira coluna) e colocar uma cor #EE922E.
div#rodape: vamos definir 900px de largura, altura de 100px, dar um clear: both (isso vai fazer essa div descer abaixo das outras div de coluna) e colocar uma cor #59574C.
* { margin: 0 auto; } body { background: #161616; } div#site { width: 900px; margin-top: 10px; } div#topo { width: 900px; height: 100px; background: #444239; } div#conteudo { width: 900px; background: #EE922E; } div#esquerda { width: 150px; float: left; background: #EE922E; } div#meio { width: 600px; float: left; background: #F8F3DF; } div#direita { width: 150px; float: right; background: #EE922E; } div#rodape { width: 900px; height: 100px; background: #59574C; clear: both; }
Loading ...
#1 por Rodrigo Xavier - 23 de junho de 2009 em 15:28
Legal, eu apenas prefiro deixar a div do “rodapé” fora da div principal nesse caso, fora da div “site”.
Então em vez de usar um clear: both; eu uso apenas um margin: auto; para centralizar.
Agora, não que desta forma esteja errada. Abraços!
#2 por David Delgado - 23 de junho de 2009 em 17:08
Legal Danilo, seria legal também fazer um outro exemplo com as divs direita e esquerda serem expansíveis as extremidades do navegador. Mais esse exemplo ficou show de bola cara! Abraços!
#3 por Chris Benseler - 24 de junho de 2009 em 09:45
@Rodrigo vai depende muito de como é o layout. Por exemplo, num site com layout desse tipo http://www.culturainglesasp.com.br/festival pode ser interessante deixar fora.
Mas, é da implementação mesmo, como você disse!
@Danilo me lembro quando fui escrever meu primeiro código “tableless”, muitos anos atrás, e apanhei demais para fazer isso!
#4 por Renan Andrade - 29 de junho de 2009 em 15:29
Bacana ein Danilo, eu quando comecei a fazer layouts em css tinha dificuldade em encontrar uns tutoriais dirigidos assim.
#5 por Danilo - 1 de agosto de 2009 em 21:01
Valeu Renan,
Tem outros jeitos de fazer layout em 3 colunas, mas esse foi o mais é simples possível…
Abraço
#6 por ronilson - 2 de agosto de 2009 em 08:39
cara vc salvou minha noites em claro estava procurand esse layout muito obrigado e parabens funciona em todos os navegadores todos mesmo pois tem tods e fico testando
#7 por xpc21 - 6 de outubro de 2009 em 11:54
Parabens pelo TUtorial! M tira uma duvida? Como coloco nesse site na coluna direita o Menu Css com JQuery que você postou aqui? GRato!
#8 por João Claudio - 12 de janeiro de 2010 em 12:29
Danilo, esse Post foi ótimo, mas ele tem um pequeno probleminha, não é só ele, outros códigos em CSS também sofrem com isso, ele não centraliza no Internet Explorer, no Firefox e no Chrome ele funciona corretamente, menos no navegador da Microsoft. Como solucionar este problema?