Layout 3 Colunas

[Fernando José 0]

Olá pessoal,

 

Estou fazendo um layout de 3 colunas. Gostaria de saber como faço para deixar a coluna do meio com largura relativa para preencher a janela inteira do usuário.

 

As div esquerda e direta tem a largura fixa.

 

Hoje meu código está assim:

 

#esquerda{	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	float:left;}#direita{	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	float:right;}#conteudo{	width:350px;	height:400px;	background-color:#eeeeee;	margin-top:10px;	float:left;}

Alguém poderia me dar uma ajuda?

 

Grato

[RTaveira 0]

Layout 3 Colunas - Maujor

Vários Templates - Maujor

3 Colunas - qualquer ordem - Maujor

[brcontainer 16]

height:100%;<~error

 

correção

 

width:100%;

^^

 

abraço

[Giovani 104]

silverfox, ele quer a largura, height (até onde eu sei) é altura.

[Fernando José 0]

Pessoal,

 

Resolvi fazendo assim:

 

#esquerda{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;}#direita{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	right:0px;}#conteudo{	margin-left:200px;	margin-right:200px;	height:400px;	background-color:#eeeeee;	margin-top:10px;	margin-bottom:10px;}

[Fernando José 0]

#esquerda{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	left:0px;}#direita{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	right:0px;}#conteudo{	margin-left:200px;	margin-right:200px;	height:400px;	background-color:#eeeeee;	margin-top:10px;	margin-bottom:10px;}

[Fernando José 0]

No Firefox ficou certo, mas quando visualizo no IE não fica.

 

Subi o arquivo para o servidor, podem me ajudar?

 

http://www.fernandomelo.com/layout/

 

Grato

[RTaveira 0]

Bom, aqui no IE não estou vendo nada demais.

 

Correção ao silverfox, width: 100%;

[Fernando José 0]

Vejam a diferença:

 

[RTaveira 0]

Elemento do meio da tela - Maujor

Absoluto e Relativo - Maujor

[brcontainer 16]

silverfox, ele quer a largura, height (até onde eu sei) é altura.

mal li errado hehe

[Fernando José 0]

Vejam a diferença:

 

Não entendi o porque dos links acima?

 

Segui um tutorial do Maujor para poder chegar nesta resultado, mas acho que comi bola em alguma parte,

 

Abraço

[brcontainer 16]

@charset "utf-8";/* CSS Document */body{	background-color:#A9BAC3;	margin: 0px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:11px;}#topo{	height:35px;	background-color:#83ACCA;	color:#5C93BA;}#cabecalho{	height:120px;	background-image:url(../imagens/cabecalho_fundo.jpg);}#esquerda{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	_top:145px;	left:0px;}#direita{	position:absolute;	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	_top:145px;	right:0px;}#conteudo{	margin-left:200px;	margin-right:200px;	margin-top:10px;	margin-bottom:10px;	height:400px;	text-align:justify;	background-color:#eeeeee;}#rodape{	height:35px;	background-color:#EEEEEE;	background-image:url(../imagens/rodape_fundo.jpg);	color:#666666;}a.linkTopo:link {	color: #FFFFFF;	text-decoration: none;}a.linkTopo:visited {	text-decoration: none;	color: #FFFFFF;}a.linkTopo:hover {	text-decoration: underline;	color: #FFFFFF;}a.linkTopo:active {	text-decoration: none;	color: #FFFFFF;}a.linkRodape:link {	color: #5C93BA;	text-decoration: none;}a.linkRodape:visited {	text-decoration: none;	color: #5C93BA;}a.linkRodape:hover {	text-decoration: underline;	color: #5C93BA;}a.linkRodape:active {	text-decoration: none;	color: #5C93BA;}

faça assim

 

 

sinceramente prefiro o seu CSS inicial position:absolute; acho que não é muito bom de se usar aqui

 

^^ abraço

[Fernando José 0]

Fiz isso e subi para o servidor, só que não resolveu.

 

http://www.fernandomelo.com/layout/

 

????

[brcontainer 16]

Então faça assim sem o position

#esquerda{	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	float:left;}#direita{	width:180px;	height:400px;	background-color:#FFFFFF;	margin:10px;	float:right;}#conteudo{	margin-left:200px;	margin-right:200px;	height:400px;	background-color:#eeeeee;	margin-top:10px;	margin-bottom:10px;}

[Fernando José 0]

Obrigado Silverbox assim resolveu!

[brcontainer 16]

SilverBox???

 

kkk ^^

 

q isso qualquer dúvida posta aew beleza?

fui