Ainda sobre layout de três colunas
Março 27th, 2007
No artigo Sua primeira vez com XHTML e CSS criei um layout de três colunas que usava a propriedade float com o valor left para posicionar as colunas (divs). Nesse artigo vou usar um método diferente para conseguir o mesmo resultado.
Para esse exemplo vou usar a mesma idéia do anterior conforme a imagem abaixo:
Aqui temos três divs que chamei de: menu, conteudo e publicidade e estão inseridas nessa ordem no XHTML:
- menu
- conteudo
- publicidade
Se você quiser relembrar (ou se não viu) como está o código desse arquivo, dê uma olhada nele aqui. A idéia é o seguinte… como vamos usar float:left nas três divs, a disposição acima pode ser usada com tranquilidade, visto que as três (por usarem float:left) serão atraÃdas para para o canto esquerdo do espaço de renderização.
Dessa vez, apesar da idéia ser a mesma da imagem acima, vamos precisar mexer em duas coisas: a disposição das divs no XHTML e as propriedades no CSS. A imagem abaixo vai dar uma idéia do que precisaremos fazer:
Precisamos da div menu no canto esquerdo (float:left) e a div publicidade no canto direito (float:right). A div conteúdo precisa ficar entre as duas… então vamos usar o que ???? float:entre-duas ? float:center ? Nada disso, vamos usar margin.
O que vai acontecer é que não iremos estabelecer uma largura para a div conteúdo, mas vamos espremê-la entre menu e publicidade.
Antes de olharmos as declarações css precisamos inverter a ordem das divs deixando como segue:
- menu
- publicidade
- conteúdo
Agora vamos olhar as declarações:
Percebem que usei largura de 20% para as divs menu e publicidade. Menu, como dito acima, flutua à esquerda e publicidade à direita. Para conteúdo usei apenas margin:0 23%.
Essa regra não aplica margens para top e bottom dessa div, mas aplica 23% para as margens direita e esquerda. O que fizemos com isso foi empurrar as div no meio das outras. Há outras declarações lá que serviram apenas para dar uma arrumadinha no layout… mas não interferem diretamente na disposição das colunas.
É isso. Esse é um outro jeito de fazer layouts de três colunas.
Ah! confira o arquivo completo nesse endereço e o arquivo com o resultado caso não invertéssemos a ordem das divs.
Até mais v.
Categoria(s): XHTML, CSS, tableless
4 Comentários Insira o seu...
1. Pedro Rogério | Março 28th, 2007 at 8:11 pm
No Opera 9 a Div publicidade tá quebrada, tá indo lá pra baixo aà no exemplo
2. andre | Março 28th, 2007 at 10:14 pm
Olá Pedro ,
estava até sem o opera 9 na minha máquina e instalei para dar uma olhada. Aqui o comportamento está idêntico ao Firefox e ao IE. A url
http://www.semantico.com.br/artigos/3colunas_2.html mostra o layout correto e a url
http://www.semantico.com.br/artigos/3colunas_3.html mostra o arquivo com o resultado incorreto pelo fato de não ter havido alteração na ordenação das divs.
3. Gláucio de Araujo | Abril 5th, 2007 at 6:56 pm
Parabéns pela simplicidade da sua abordagem didática!
Este método é bem interessante e eu já o utilizo há bastaaante tempo. Mas tem uma coisa nele que sempre me deixou frustrado, e é justamente a necessidade de alterar no XHTML a ordem lógica das informações (”navegação”, “conteúdo” e “extras” seria a sequência desejável na maioria das vezes). Por isso fiz algumas tentativas usando o seguinte esquema:
XHTML na ordem…
menu (#nav)
conteudo (#cont)
publicidade (#pub)
… e o CSS…
* {
margin:0;
padding:0;
}
#nav, #pub {
display:block;
width:20%;
}
#cont {
display:block;
margin-left:1%;
width:58%;
background-color: #0f0;
float:left;
}
#nav {
background-color:#f00;
float:left;
}
#pub {
float:right;
background-color: #00f;
}
Resultado: ao menos aqui funcionou direitinho no FF, IE6 e Opera 9… 3 colunas. Alguém mais já conseguiu fazer funcionar desse jeito?
4. Paula | Novembro 14th, 2007 at 3:34 pm
nossa, legal..
mas e se eu quiser que a figura fique embaixo?
assim:
texto_texto_texto_texto_texto_texto_texto_texto
texto_texto_texto_texto_texto_texto_texto_texto
texto_texto_texto_texto_texto|_______________|
texto_texto_texto_texto_texto|____Imagem_____|
texto_texto_texto_texto_texto|_______________|
texto_texto_texto_texto_texto|_______________|
alguem sabe como fazer??
obrigada
Deixe seu Comentário
XHTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>