Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Argos

[Resolvido] Layout com 3 colunas sendo 2 fixas

Por , em Desenvolvimento frontend

Recommended Posts

Argos    0

Argos
Postado

Boa tarde galera;

 

Estou tentando montar um layout com três colunas, sendo duas delas, as lateriais, com tamanho fixo e a central fluida. Consegui posicionar as divs corretamente, mas o conteúdo de uma delas não. Vejam o que acontece com o conteúdo da coluna à esquerda:

<html>
<head>
<style type="text/css">
body {margin:0;padding:0;background-color:#fff;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:12px;}
#cabecalho{width:auto;height:120px;border:1px solid #111;color:#000;text-align:center;}
#wrapper{padding-left:180px;}
#wrapperDireita{float:right;margin-left:180px;position:relative;width:100%;}
#propagandas{background-color:#ccc;float:right;width:145px;}
#conteudo{border:1px solid #111;color:#000;overflow:hidden;}
#nav{background-color:#ccc;left:-180px;padding-top:0;position:relative;width:180px;z-index:2;color:#000;}
#rodape{border:1px solid #111;clear:both;margin:5px 0 0 -180px;padding:20px 0 0;}
</style>
</head>

<body>

<div id="cabecalho"> 
 <h1>CABEÇALHO</h1>
</div>

<div id="wrapper">

 <div id="wrapperDireita">
     <div id="propagandas">
     	Coluna<br />
	na lateral direita<br />
       com tamanho fixo<br />
	onde entrariam<br />
	outros<br />
	conteúdos
     </div>
     <div id="conteudo">
       CONTEÚDO PRINCIPAL<br />
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, sapien sed vehicula laoreet, nisl erat feugiat elit, vitae blandit est ligula a urna. Pellentesque in purus id mauris varius ultricies. Vivamus suscipit velit sed dolor. Vivamus consectetur enim ut elit. Vivamus ac leo. Donec ac neque at risus euismod fermentum. Vestibulum nunc est, pharetra vel, fermentum ut, suscipit in, nulla. Phasellus urna ligula, mattis sed, fermentum vitae, porta in, elit. Proin ut lorem sit amet ante tempus porttitor. Quisque turpis. Curabitur semper mollis nisi. Cras mattis elementum lacus. Nulla eros enim, fermentum sit amet, ultrices eget, tempor fringilla, lectus. Fusce lectus orci, sagittis at, ultricies vel, fringilla vel, lectus. Donec eget nisl a nulla suscipit elementum. Phasellus ut turpis vel nisi mollis scelerisque. 
	Nam accumsan sapien imperdiet nisi. Pellentesque luctus urna vitae massa. Maecenas ut erat. Nam sagittis, sem non facilisis imperdiet, sem metus cursus quam, nec adipiscing est eros a velit. Praesent viverra, dui eget varius rutrum, sapien leo molestie mauris, ac cursus est libero sit amet quam. Duis sit amet augue non augue gravida laoreet. Fusce tincidunt felis sit amet mi. Vivamus nisl. Phasellus in urna at lectus elementum eleifend. Nunc turpis ipsum, adipiscing in, convallis id, rhoncus at, enim. Sed a metus. Phasellus id sapien. Sed urna. Fusce metus. Pellentesque consequat. Curabitur ante. In hendrerit neque ut leo. 
	Duis eget urna. Aenean convallis, mi id scelerisque aliquet, risus ligula ornare urna, nec aliquet felis quam sit amet lorem. Vivamus tristique iaculis ante. Praesent diam purus, bibendum ac, vestibulum et, vehicula id, dui. Cras ac eros id dui scelerisque mollis. Mauris a arcu quis metus sollicitudin dictum. Vestibulum sollicitudin, purus quis suscipit dapibus, sapien massa auctor magna, eu feugiat ante massa eget lorem. Suspendisse potenti. Sed ullamcorper. Pellentesque risus elit, bibendum ac, posuere consequat, condimentum venenatis, arcu. 
     </div>
 </div>

 <div id="nav">
   Coluna<br />
na lateral esquerda<br />
   com tamanho fixo<br />
onde estaria<br />
inserido<br />
o menu de<br />
navegação.<br />
ESTA COLUNA É<br />
O PROBLEMA!!
 </div>

 <div id="rodape" align="center">
   RODAPÉ   
 </div>

</div>

</body>
</html>

 

O texto começa a aparecer abaixo da div do conteúdo... Como solucionar isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Não entendi pra quê toda essa gambiarra pra fazer um layout fluído de 3 colunas.

 

Sugiro:

:seta: http://forum.imasters.com.br/topic/347842-layout-liquido/

 

O resultado é exatamente o que tu quer fazer. Não precisa de z-index, position, nem left com valor negativo.

 

:bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito