DIV em colunas

[Apokalypse 0]

Olá pessoal,

 

Estou com o seguinte problema:

Estou querendo deixar 2 divs uma ao lado da outra como se fossem colunas. A div da esquerda vai ser o menu e a da direita a do conteúdo.

 

Meu problema é: consegui deixar as duas lado a lado, mas tive que deixar a ordem no código assim:

 

Se alguem quiser visualizar funcionando: http://www.mmsweb.com.br/framework (este está com o css, note que está tudo certinho)

http://www.mmsweb.com.br/framework/index2.html (este está sem o css. o conteúdo aparece antes do menu. Se eu colocar na ordem certa - menu > conteudo - com o css as DIVS não ficam lado a lado, e sim uma em baixo da outra.

 

<!-- INÍCIO molde principal --><div id="principal">	<div id="conteudo">		<div id="titulo">   			<div class="direita">Último acesso em: {DATA_ULTIMO)</div>			<div class="esquerda"><h3>Principal</h3></div>		</div>		<div id="corpo">			<div>Bom dia Marcio. Bem-vindo ao Sistema Administrativo versão 1.0.</div>			<div id="alerta">você tem 4 mensagem(s) nova(s).</div>	  </div>	  <div id="titulo">		<div class="esquerda">			  <h3>Atualizações</h3>			</div>		</div>		<div id="corpo">			<div><span class="style3">14/03/06  18:51</span> - <a href="#">Adicionada listagem de municípios</a><br />			  <span class="style3">14/03/06 13:45</span> -<a href="#"> Novo Layout</a></div>	  </div>	 <div id="rodape">Área administrativa v1.0<br /> Copyright © <a href="http://www.mmsweb.com.br" target="_blank">MMSWEB Internet </a></div>  </div>	<div id="menu">				<div id="titulo"><h3>Menu</h3></div>		<div id="menu-itens">  <ol>	<li>Convênios	  <ul>		  <li><a href="#">Cadastrar</a></li>		<li><a href="#">Listagem</a></li>		<li><a href="#">Mala-diret</a>a</li>	  </ul>	</li>  </ol></div></div></div><!-- FIM molde principal -->

e o CSS:

/* CSS Document */body {	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Arial", "MS Sans Serif";	font-size: 11px;}#principal {	width: 700px;}#conteudo {	width: 500px;	border: 1px solid #CCCCCC;	padding: 5px;	background-color: #F2F2F2;	float: right;}#formulario label,input {	margin: 0px;	display: block;}#rodape {	font-size: 10px;	font-family: Verdana, Arial, Helvetica, sans-serif;	text-align: center;	margin-top: 50px;}#alerta {	color: #CC0000;	background-color: #FFFFFF;	border: 1px solid #000000;	position: relative;	margin-right: 50px;	margin-left: 50px;	padding-top: 10px;	padding-right: 10px;	padding-bottom: 10px;	padding-left: 50px;	background-image: url(imagens/info.gif);	background-repeat: no-repeat;	background-position: 5px center;	margin-top: 10px;	margin-bottom: 10px;}h3 {	font-size: 14px;	font-weight: normal;	margin: 0;	font-size: 14px;	font-weight:bold;	color:#CC0000;}#linha-inf {	margin-bottom: 10px;	padding-bottom: 2px;	border-bottom-width: 1px;	border-bottom-style: dashed;	border-bottom-color: #000000;	font-size: 12px;	font-weight: bold;	margin-top: 10px;}.direita {	float: left;}.direita {	float: right;}#titulo {	margin-bottom: 10px;	padding-bottom: 2px;	border-bottom-width: 1px;	border-bottom-style: dashed;	border-bottom-color: #000000;	font-size: 12px;	font-weight: normal;	margin-top: 5px;}#corpo {	padding-left: 10px;	padding-right: 10px;}#menu {	width: 160px;	border: 1px solid #CCCCCC;	background-color: #F2F2F2;	background-repeat: no-repeat;	background-position: center 5px;	padding-top: 5px;	padding-right: 5px;	padding-bottom: 5px;	padding-left: 5px;}#menu-itens ol{	list-style-type: none;	font-weight: bold;	margin-left: 5px;	padding: 0px;	margin-top: 0px;}#menu-itens {	display: block;}#menu-itens ul{	font-weight: normal;	list-style-position: outside;	list-style-image: url(imagens/bullet.gif);	list-style-type: none;	margin-left: 10px;	padding-left: 10px;	margin-bottom: 5px;	padding-bottom: 0px;}#principal #menu #menu-itens a {	color: #000000;	text-decoration: none;}#principal #menu #menu-itens a:hover {	text-decoration: underline;}

 

Já fiz de tudo. só consegui deixar lado a lado com a ordem das divs invertidas.

Alguem sabe como solucionar este problema??

 

Valeu!!

[fsilvarib 0]

Então aqui eu faço o seguinte:Crio um DIV principal e com tudo certinho (width, height, etc).Depois crio o DIV do menu e do Conteúdo, e no css eu defino que o menu e contéudo vao ter o " float: left", assim eles vai ficar encostados na esquerda, pronto. Mas se você quiser da um pequeno espaço, você pode colocar margin-left no conteudo ou margin-right no menu.Aí vai de você mesmo.Mas se você não entendeu o que eu quis dizer, poste aí que vamos resolver essa parada.FLW até mais.

[micox 2]

Talvez o santo graal te ajude: http://forum.imasters.com.br/index.php?s=&...ndpost&p=522280

[Giovani 104]

Muito bons esse links ai micox....

 

Show de bola!!!

 

Abraçcos!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif