[Resolvido] alinhamento de colunas

[ulfreitas 6]

Boa tarde

Dentro de uma div (com 100% de width), tenho duas colunas como faço para posicionar uma do lado da outra e deixar um espaço de uns 50px entre elas.

Eu fiz um teste aqui mas a coluna da direita tá descendo.

 

---- html

 

<div id="corpo">   
    	<div id="prodEsquerda">
        	<h2>Produtos E Serviços</h2>
            
            <div id="msn">
            	<img src="" alt="Gerenciamento MSN" />
            	<p><strong>Gerenciamento de MSN</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- msn -->
            
            <div id="monitoramento">
            	<img src="" alt="Gerenciamento MSN" />
            	<p><strong>Monitoramento Web</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- monitoramento -->
            
            <div id="conversao">
            	<img src="" alt="Conversão de Dados" />
            	<p><strong>Conversão de Dados</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- conversao -->
            
          <div id="suporte">
            	<img src="" alt="Suporte à Servidores" />
                <p><strong>Suporte à Servidores</strong></p>
                <em>
                	Suporte e reparo em qualquer tipo
                    de servidor Linux ou Windows<br />
                    <a href="#">[Saiba Mais]</a></em>
          </div><!-- suporte -->            
        </div><!-- prodEsquerda -->
        
        <div id="prodDireita">
        	<div id="firewall">
            	<img src="" alt="Firewall" />
            	<p><strong>Firewall</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- firewall -->
            
            <div id="backup">
            	<img src="" alt="Backup" />
            	<p><strong>Backup</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- backup -->
            
            <div id="hospedagem">
            	<img src="" alt="Hospedagem DNS" />
            	<p><strong>Hospedagem DNS</strong></p>
            	<em>
            		Monitora msn, detecção de intrusos, 
                	controla contatos de usuários...<br /> 
               		<a href="#">[Saiba Mais]</a>
            	</em>    
            </div><!-- hospedagem -->
            
          <div id="consultoria">
            	<img src="" alt="Consultoria" />
                <p><strong>Consultoria</strong></p>
                <em>
                	Suporte e reparo em qualquer tipo
                    de servidor Linux ou Windows<br />
                    <a href="#">[Saiba Mais]</a></em>
          </div><!-- consultoria -->
        </div><!-- prodDireita -->
        </div><!-- corpo -->

---- css

 

#corpo {width:100%;}
#prodEsquerda {float:left; width:45%;}
#prodDireita {float:right; width:50%; padding-left:50px}

pessoal obrigado pela atenção

[kreator 0]

define os 2 como float left http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

e onde você não queira objetos flutuante use a propriedade clear:

 

espero ter ajudado!! :D

[ulfreitas 6]

desculpa vou explicar direito, porque olhando minha pergunta e o meu codigo ate eu fiquei perdido.

 

a div corpo engloba tudo, e a div prodEsquerda tem q ficar alinhada a esquerda dento do corpo e a prdoDireita a direita. todas as outras divs estão dentro delas.

 

kreator não deu certo, mas obrigado ;)

[kreator 0]

cuidado cara,você está usando uns parametros com % e outros com px!!

 

tira esse padding pois está ultrapassando a div pai!!

 

coloca assim

 

#corpo {width:100%;}

#prodEsquerda {float:left;
width:valor em px;}

#prodDireita {float:left;
 width:valor em px;}

testa ai e ve!!!

 

automaticamente a #prodEsquerda com {float:left;}todos as divs que você definir com left irão para direita!!

 

outra coisa defina uma altura heath:x px

 

se tiver um link fica muito melhor!!

[kreator 0]

outra coisa use sempre o css reset

 

*{padding:0px;
margin:0px;}

:D

[ulfreitas 6]

Ow agora deu certo cara

só nao entendi se eu coloquei #prodEsquerda:{float:left} e #prodDireita:{float:left} - não deveria ter dado errado? tipo uma sobre a outra ou de baixo alguma assim, algum erro? Mas elas ficaram certinhas uma ao lado da outra, como pode?

 

bom no final ficou assim:

 

#corpo {width:100%;}

#prodEsquerda {float:left; width:45%;}

#prodDireita {float:left; width:50%; padding-left:3%}

 

obs: Tive q manter tudo em %, adoraria fazer esse site em px, mas o meu chefe acha que layout fluido é a revolução da internet e temos q fazer tudo quanto é site assim agora >_<' e eu acho completamente desnecessário para ESSE SITE, mas quem sou eu pra dizer o contrario, sou apenas o designer... <_<

 

o link vou ficar devendo ainda to produzindo o site, valew pela ajuda http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[kreator 0]

declare os floats corretamente para não ter problemas futuros!!quando seu layout não for tão simples e tbm tem a questão dos navegadores que são sempre dor de cabeça!

 

mas q bom q arrumou cara!!

 

vi q você diminuiu o valor do padding :P

 

abraço

 

[RESOLVIDO]

[ulfreitas 6]

Outra dúvida q apareceu.

No IE (por incrivel q pareça) o layout está certo :huh: , mas no firefox e chrome ta quebrando;

<div id="containeer">
   <div id="left-content"> Aqui é minha coluna esquerda </div><!-- LEFT-CONTENT -->
   <div id="saudacao"> Aqui tem um background q se repete por toda pagina e umas frase do tipo "Seja bem vindo"</div><!-- SAUDACAO -->
   <div id="right_content"> Aqui é a coluna direita </div><!-- RIGHT_CONTENT -->
</div><!-- CONTAINEER -->

#left-content {float: left; position: absolute; left:0; width: 230px; z-index: 2;}
#saudacao {background: url(imagens/bg_saudacao.jpg) repeat-x; height: 195px; left: 0; position: absolute; top: 250px; width: 100%; z-index: 1;}
#right_content {margin-top: 195px; margin-left: 270px;}

para ser mais preciso, no firefox e chrome a "left-content" está iniciando após a "saudacao" quando ela deveria ficar por cima da "saudacao"

tentei usar o z-index para posicionar um sobre o outro mas não adiantou.

Tem algum código para colocar a "left-content" sobre a "saudacao"?

 

Agradeço pela Atenção;

[ulfreitas 6]

Tá acho q resolvi, pelo menos até não quebrar do outro lado <_< ;

 

fiz o seguinte no firefox a left-content nao estava ficando por cima da saudacao, ai eu tirei o {position: absolute;} de #saudacao

resolveu em todos os navegadores a posição de z-index ficou certo, só q a right_content desceu :angry: , ai mais algumas horas olhando o código percebi que declarei margin-top: 195px; ai tirei e funcionou http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Agradeço a mim mesmo dessa vez :D