Publicado em 27 de out.

Layout líquido 3 colunas

Fala pessoal tranquilo?

Então to precisando de uma ajuda aqui,

to desenvolvendo um Layout para um Painel Administrativo, mas preciso que seja estilo o Wordpress, a primeira coluna seja fixa, e as outras 2, ou seja meio e lateral direita sejam ajustáveis de acordo com a resolução da tela...

Eu já vi esse tópico : http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

Tentei fazer as modificações necessárias mas não consegui, alguem poderia me ajudar?

Abs

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 27 de out.

Código ou link?

~Thiago Lara· 27 de out.

Fala conterrâneo ,

então, o link é esse: http://www.perfildoc.com.br/admin/principal.asp

mas tipo, aí tem 2 colunas, na verdade a coluna da esquerda seria fixa, ou seja um MENU mesmo, e a coluna do meio teria que ser dividida em 2... e essas duas ajustaveis...

dai n sei

Obs: to adaptando do link que mostrei no primeiro POST

André do Vale· 27 de out.

Cara, eu tenho um código aqui, que infelizmente não sei se irá de ajudar, pois não funciona no IE7 e inferiores, mas nos demais browsers está ok (inclusive IE8 e superiores):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

div {

	height: 400px;
}
#tudo {
	display: table;
	width: 100%;
}
#teste {
	display: table-row;
}
#esquerda-fixa {
	width: 200px;
	background: red;
	display: table-cell;
}
#conteudo-liquido {
	background: yellow;
	display: table-cell;
}
#direita-liquida {
	width: 30%;
	background: green;
	display: table-cell;
}
</style>
</head>

<body>
<div id="tudo">
	<div id="teste">
 <div id="esquerda-fixa">
 esquerda fixa
 </div>
 <div id="conteudo-liquido">
 conteúdo líquido
 </div>
 <div id="direita-liquida">
 direita líquida
 </div>
	</div>
</div>
</body>
</html>

angelorubin· 27 de out.

Boa tarde,

Veja se isto ajuda.

CSS

img{border:none;}

*{margin:0;padding:0;list-style:none;}

#masthead{height:100px; background-color:#555555;}

.main{height:300px; width:20%; float:left; background-color:#CCCCCC; border-
top:#FFFFFF 2px solid;}

#secondary{height:300px; width:39.5%; float:left; background-color:#666; border-top:#FFFFFF 2px solid;}

#secondaryFull{height:300px; width:39.5%; float:left; background-color:#CCC; border-top:#FFFFFF 2px solid;}

#footer{height:50px; width:100%; clear:both; background-color:#555555; border-top:#FFFFFF 2px solid;}

</style>

XHTML

 <div id="masthead">MastHead</div>
 <div class="main">Main</div>
 <div id="secondary">Secondary</div>
 <div id="secondaryFull">SecondaryFull</div>
 <div id="footer">Footer</div>

Evandro Oliveira· 28 de out.

<ul id="menu">
 <li>item de menu</li>
 <li>item de menu</li>
 <li>item de menu</li>
 <li>item de menu</li>
 <li>item de menu</li>
</ul>

<div id="conteudo">
 <div id="principal">
 <div id="alternativo">
</div>

#menu { background: #f00; float: left; width: 150px; }
#conteudo { margin-left: 150px; }
#conteudo > div { width: 50%; }
#principal { background: #0f0; }
#alternativo { background: #00f; }