Ir para conteúdo

POWERED BY:

Arquivado

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

bdoweb

Div lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

bdoweb    0

bdoweb
Postado

Bom eu preciso colocar um div do lado do outro tenho os seguintes codigos mas sai um de baixo do outro como posso resolver isso....

 

tenho o seguinte codigo!!!

div#conteudo {	margin: 0 auto;	padding: 0px 0px 0px 0px;	background-color:#FFFFFF;	width: 760px;}div#esquerda {	margin: 0 auto;	padding: 0px 0px 0px 0px;	width: 240px;}div#esquerda dt dl dd{	margin: 0 auto;	padding: 0px 0px 0px 0px;}div#esquerda dd {	background-color:#003399;}div#direita {	margin: 0 auto;	padding: 0px 0px 0px 0px;	width: 520px;}div#direita dt dl dd{	padding: 0px 0px 0px 0px;	text-align:center;}div#direita dd {	background-color: red;}
e o html assim

<div id="conteudo">	<div id="esquerda">  <dl> 	 <dt>Texto Qualquer</dt> 	 <dd>    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 	 </dd>  </dl>	</div>	<div id="direita">  <dl> 	 <dt>Texto Qualquer</dt> 	 <dd> 	 Pronto Atendimento 24h Vital Care fundado em  2004 com o objetivo de atender os clientes AMEPLAN com a mais alta qualidade... 	 </dd>  </dl>	</div></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pacato    0

Pacato
Postado

Cara, eu estou tendo a mesma dificuldade, eu quero colocar 2 div um ao lado da outra, mas essas 2 divs estao dentro de uma outra com borda, como se fosse uma caixa com as divs dentro, so q quando eu coloco o float, eh como se as div "saissem" da caixa, e a caixa nao fica contornando tds elas, alguem pode me dar uma solucao pra eu poder colocar as divs uma ao lado da outra, sem q de esse problema?!?!Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pacato    0

Pacato
Postado

Aki vai o post do codigo q ta dando erro, se alguem puder me ajudar...Valeu!!! B)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Teste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">* { padding: 0; margin: 0; }html, body { width: 100%; height: 100%; }.pesquisa { padding: 20px 0 15px; border: 1px solid #9E9E9E; border: 3px solid green; background: gold;}.comp { width: 50%; text-align: center; }.esquerda { float: left; }</style></head><body> <div id="meio">  <div class="pesquisa">  <div id="coluna_esquerda" class="esquerda comp">    Primeiro bloco de pesquisa<br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />  </div>  <div id="coluna_direita" class="esquerda comp">    Segundo bloco de pesquisa<br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />    <span>Mais conteudo</span><br />  </div>  </div> </div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

boiler    0

boiler
Postado

Fico só a borda sem o padding... =/

<{POST_SNAPBACK}>

Pacato, o problema é que você está usando padding na div maior e acabou esquecendo na hora de setar a porcentagem. Então você tem que usar um valor menor que a metade da largura.

 

Não sei se fui claro, mas refiz o código e aproveitei pra dar uma limpadinha rápida:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Teste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {padding: 0;margin: 0; }#pesquisa {padding: 20px 0 15px;border: 1px solid #9E9E9E;border: 3px solid green;background: gold;float: left;width: 99%;}.comp {float: left;width: 49%;text-align: center; }</style></head><body><div id="meio">  <div id="pesquisa">  <div id="coluna_esquerda" class="comp">    Primeiro bloco de pesquisa    <div>Mais conteudo</div>    <div>Mais conteudo</div>    <div>Mais conteudo</div>    <div>Mais conteudo</div>  </div>  <div id="coluna_direita" class="comp">    Segundo bloco de pesquisa    <div>Mais conteudo</div>    <div>Mais conteudo</div>    <div>Mais conteudo</div>    <div>Mais conteudo</div>  </div></div></body></html>

Ve se funciona ai, um abraço. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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