Publicado em 27 de abr.

[Resolvido] Layout de três colunas: Coluna central ocupar es

Olá a todos!

Estou desenvolvendo uma página para a intranet da empresa que trabalho. Estou fazendo o layout em 3 colunas, as duas colunas das extremidades com largura de 200px. Eu gostaria que a coluna central ocupasse o resto do espaço disponível. o modelo seria assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img46.imageshack.us/img46/139/semttulofim.jpg&key=ada5bf69d45b16b6f17cafe418969131e78f627c5aa5d5a0f16578701a3318a0" alt="Imagem Postada" />

onde a coluna central seria ajustada de acordo com o tamanho da janela.

Eu estou ficando chateado porque já tentei algumas coisas, como width em 100%, auto e outras coisas mas não vai de forma alguma! alguém pode ajudar?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

GabrielFerrari· 27 de abr.

Pelo que entendi

você precisa colocar tudo em porcentagem

20% as laterais e 60% a do meio por exemplo

De uma pesquisada por min-width para evitar alguns problemas com o conteúdo.

Fiz uma estrutura rápida aqui só para você ter uma idéia

<html>
<head>

<style>
#all{
	width: 100%;
	height: 1000px;
	background: yellow;
}
#topo{
	width: 100%;
	height: 200px;
	background: red;
}

#esquerda{
	width: 20%;
	height: 100%;
	background: green;
	float: left;
}
#meio{
	width: 60%;
	height: 100%;
	background: blue;
	float: left;
}
#direita{
	width: 20%;
	height: 100%;
	background: orange;
	float: right;
}
</style>

</head>
<body>
<div id="all">

<div id="topo"></div>
<div id="esquerda"></div>
<div id="meio"></div>
<div id="direita"></div>

</div>
</body>
<html>

Qualquer dúvida ou problema torne a postar :)

Evandro Oliveira· 27 de abr.

.colEsquerda {

 float: left;

 width: 20%;

}

 

.colDireita {

 float: right;

 width: 20%;

}

 

.central {

 margin: 20% 0;

}

 

.rodape {

 clear: both;

}

Thiago Retondar· 27 de abr.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

bdexterholland· 30 de abr.

uhmmmmm isto se chama layout líquido :)

Baum saber! eu acho que já havia visitado este link!

abs!