Baseado no artigo sobre tipos de layout, vou mostrar como fazer um simples layout elástico com 3 colunas utilizando css.
A página terá um banner, uma coluna direita que será o menu, uma coluna central que será o conteúdo, uma coluna esquerda com notícias e um rodapé.
No corpo da página, entre o <body></body>, crie a seguinte estrutura:
<div id="geral">
<div id="topo">Banner</div>
<div id="coluna_dir">Menu</div>
<div id="conteudo">Conteúdo</div>
<div id="coluna_esq">Notícias</div>
<div id="rodape">Rodapé</div>
</div>
Entre o cabeçalho <head></head>, crie o seguinte estilo.
<style type="text/css">
#geral { width:700px; margin:auto; padding:0; border:1px #000 solid; text-align:center; }
#topo { width:700px; height:120px; background-color:#CCC; }
#coluna_dir, #coluna_esq { width:150px; height:250px; background-color:#FF0; float:left; }
#conteudo { width:400px; height:250px; background-color:#39F; float:left; }
#rodape { width:700px; height:120px; background-color:#F00; clear:both; }
</style>
Agora vou explicar o que foi feito.
É aconselhável que ao adicionar cada linha, vá vendo na página as mudanças para entendê-las.
Neste exemplo de layout, a grande dica para deixar o site sempre centralizado, é definir um tamanho fixo de largura atráves do seletor width e adicionar o seletor margin:auto na div geral que contém todos os elementos do site, ainda na mesma div definimos que os textos serão centralizados.
Em seguida formatamos o banner definindo um tamanho de 700px de largura e 120px de altura com uma cor de fundo cinza.
Agora é a parte mais importante, que são as colunas.
Formatamos as colunas da direita e da esquerda (Menu e Notícias) com 150px de largura, 250px de altura e um fundo amarelo. Com o seletor float, nós indicamos que os elementos flutuaram à esquerda do conteúdo (float:left).
Na coluna central fazemos o mesmo, só que com uma largura de 400px e um fundo azul.
O que faz com que as colunas fiquem uma do lado da outra neste caso, é o seletor float com um valor left, eles só iriam um para baixo do outro caso a soma da largura das 3 colunas fosse maior que a div geral, no caso 700px;
Por fim formatamos o rodapé com uma largura de 700px, altura de 120px, um fundo vermelho e adicionamos o seletor clear com um valor both, isso faz com que o elemento seja renderizado abaixo de qualquer outro elemento que estiver flutuando no mesmo espaço de renderização.
Espero que tenham gostado!
Cara, muito show este teu post. Sempre passei trabalho pra fazer layout de 3 colunas e partia pro uso de tabelas, mesmo todos não recomendando usar tabelas para fazer layout. Se não fosse encher muito a paciência, queria saber se podes me falar de como produzir estas três colunas, mas que elas não tenham uma altura (width) pré-definida e que, digamos, se a coluna conteúdo dinamicamente chegar a 1000px, as colunas da esquerda e direita também fiquem com este tamanho, assim como seria com uma tabela. Abraços
Olá Flávio, muito obrigado pelo comentário!
Assim que tiver um tempinho faço um artigo com sua dúvida, ok.
Abraços!
Cara!! Muito bom seu post!!
Se possivel, manda pra mim a duvida do Flavio.
Quero fazer com porcentagem.
abraços
Isso não é um layout elástico. O layout elástico usa unidades em e não pixels.
Cara, isso não é um template elástico, isso é fixo, um layout elástico você limita uma largura mínima e uma máxima , exemplo: mínimo de 800×600 e máximo de 1024×600.
Obtenha mais informções antes de tentar repassar para outras pessoas.
Apesar de não ser um layout elastico ele é bem simples de usar e quebra um galhão!!!
Eu mesmo estou usando ele!!!
Pois é, esse layout não é elástico.
Cuidado na hora de transmitir informação, pois esse post está passando o conceito errado.
Como disse a Angélica, a unidade utilizada é a em.
onde está a propriedade “elástica” desse layout… to achando que ele é fixo…
to começando agora, me ajudou bastante, apesar de não ter feito tudo isso mas é bem legal…valeu!