Ir para conteúdo

POWERED BY:

Arquivado

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

Rafael Santini

[Resolvido] 2 DIVs lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Santini    0

Rafael Santini
Postado

Preciso implementar 2 DIVs lado a lado, sendo que a largura do primeiro deve preencher todo o espaço disponível e o segundo terá uma largura fixa. Segue o que estou tentando fazer:

 

<div style="float: left; width: 100%">Lado Esquerdo</div>
<div style="float: right; width: 200px">Lado Direito</div>

Ao colocar width: 100% no DIV da esquerda, o DIV da direita cai para baixo.

 

Como posso fazer para que a largura do DIV da esquerda ocupe todo o espaço disponível considerando o DIV da direita?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lígia MB:)    0

Lígia MB:)
Postado

Rafael, isso ocorre por 2 motivos:

 

Primeiro, pq o Firefox possue um bug de float, que joga as divs pra outra linha mesmo. Segundo, pq você deve criar um container pro seu site antes. Pois o 100% (porcentagem) é um sistema de medida relativo, relativo ao tamanho do seu container. Como você não definiu o container, o navegador interpretou que 100% fosse relativo ao tamanho da tela inteira (por favor, me corrijam se estou raciocinando erroneamente)

 

Enfim, segue o código completo, funcionando nos 3 principais navegadores:

- Firefox

- Internet Explorer 6

- Internet Explorer 7

 

Nos outros, não testei, mas acredito que se comportarão de maneira equivalente.

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin:0; padding:0} /* básico do css reset */	
	#site{ 
		width: 776px; /* largura ideal para não dar barra de rolagem horizontal nos sites com resolução 800x600 */
		margin: 0 auto; text-align:center; /* para centralizar o site no meio, horizontalmente */
		}

	#coluna_direita, #coluna_esquerda{ float:left; display:block; height: 100px} /*height: 100px - esse valor pode ser mudado ou até excluido, só usei para deixar as 2 colunas com mesma altura, para exemplificar*/
	#coluna_esquerda{ 
		background-color:#06c; /* azul */
		width: 576px; /* como você deliminou que o site terá no máximo 776px de largura e a "#coluna_direita" já tem 200px, é só fazer a conta: 776px - 200px para achar o valor da #coluna_esquerda */
		}
	#coluna_direita{ 
		background-color: #ccc; /* cinza */
		width: 200px;}


/* limpa bugs de float do Firefox */

			#coluna_esquerda:after, #coluna_direita:after{
				content: ".";
				display: block;
				clear: both;
				visibility: hidden;
				line-height: 0;
				height: 0}
			.limpabug, .gallery { display: inline-block}			
			html[xmlns] .limpabug, html[xmlns] .gallery { display: block}			
			* html .limpabug, * html .gallery { height: 1%}


</style>
</head>

<body>
	<div id="site">
		<div id="coluna_esquerda">
			<p>conteúdo da coluna esquerda</p>
		</div>
		<div id="coluna_direita">
			<p>conteúdo da coluna direita (largura fixa)</p>
		</div>
	</div>
</body>
</html>

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Santini    0

Rafael Santini
Postado

Lígia,

 

Testei o seu código com as seguintes alterações:

 

width: 776px para width: 100%

width: 576px para width: 100%

 

A coluna da direita caiu para baixo, como na seguinte imagem:

 

Imagem Postada

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lígia MB:)    0

Lígia MB:)
Postado

Isso ocorreu pq com certeza você não leu os comentários que inseri no código e/ou não entendeu a lógica da coisa...

 

100% = toda a largura. Concorda?

Se temos 2 divs para disputar esta largura (lado a lado), as 2 não podem ter, individualmente 100%

Elas precisam, JUNTAS formar os 100%. Logo, se você quisesse 2 colunas de larguras iguais, teria que atribuir width=50% para cada uma...

 

Por isso que ela jogou a outra pra baixo, pq, como na física, 2 corpos não podem ocupar o mesmo lugar http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Leia novamente os comentários que coloquei no código (é tudo o que está dentro da marcação /* */ )

Vou lhe ajudar:

 

#coluna_esquerda{

background-color:#06c;

width: 576px;

/* como você deliminou que o site terá no máximo 776px de largura e a "#coluna_direita" já tem 200px, é só fazer a conta: 776px - 200px para achar o valor da #coluna_esquerda */

}

#coluna_direita{

background-color: #ccc; /* cinza */

width: 200px;}

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Acho que entendi o efeito que você quer.

Dá uma olhada.. foi preciso forçar um pouco a barra:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ 
	margin: 0;
	padding: 0;
}
#site {
	min-width: 776px;
	background-color: #f0f;
	padding-right: 220px; /* aqui é o segredo desse truque. Use um pouco mais doque o width da coluna */
	position: relative; /* contexto de posicionamento */

}
#colunaDireita {
	width: 200px; 
	background-color: #0ff;
	position: absolute; /* forçando a barra */
	right: 0;
	top: 0;
}
p{
	text-align: justify; /* para facilitar a visualização do efeito */
	text-indent: 10px;
}
</style>
</head>

<body>
	<div id="site">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, 
		sem eget sodales adipiscing, neque eros posuere tortor, id pharetra purus velit
		in urna. Nam elementum, erat sit amet tincidunt facilisis, magna nunc interdum
		augue, a condimentum massa leo sed magna. Aliquam volutpat, sapien sed viverra
		volutpat, ligula velit posuere eros, vel fermentum enim metus nec nibh. In hac
		habitasse platea dictumst. Vestibulum vehicula risus id nulla. Pellentesque 
		arcu dui, convallis sed, placerat at, lacinia accumsan, nulla. </p>
		
		<p>Pellentesque semper malesuada neque. Donec vulputate porttitor neque. Etiam rutrum euismod 
		risus. Etiam eu nisi egestas nisi eleifend egestas. Pellentesque aliquet.
		Integer lacinia faucibus nisi. Morbi iaculis sapien nec lorem. Proin luctus
		sollicitudin nibh. Pellentesque scelerisque turpis at eros. Proin orci ligula,
		fermentum eu, bibendum eu, mollis in, mauris. In lacus tortor, luctus eu, 
		commodo quis, vestibulum sed, elit. Vestibulum justo.</p>
		
		<div id="colunaDireita">
			<p>Aenean massa lacus, auctor laoreet, scelerisque quis, tristique sit amet, 
			felis. Aliquam imperdiet mi at nibh. Sed risus justo, feugiat eget, lobortis 
			eu, imperdiet non, lacus. In a felis id lectus sodales consequat. Donec dapibus
			aliquet lorem. Nullam rutrum eleifend urna. Aliquam sed urna. Sed at nisl.
			Vivamus sodales, sem ac venenatis malesuada, orci ipsum porttitor sem, quis
			vulputate tortor est at orci. Phasellus at lorem.</p>
			
			<p>Cras nec nulla. Aenean 
			imperdiet consequat magna. Nullam nec velit. Nunc scelerisque, dui eu porttitor 
			tempus, urna neque auctor massa, sit amet vulputate diam nulla at metus.
			Nulla justo sem, porttitor vel, iaculis ut, ultricies eget, ante. Nulla mi
			purus, porta vel, consectetur vel, rutrum id, orci. Pellentesque ornare
			ligula vitae metus. Sed vestibulum, purus ullamcorper vestibulum consequat,
			velit nunc mollis neque, ac luctus nunc nisi aliquam augue.</p>
		</div><!-- /colunaDireita -->
	</div><!-- /site -->
</body>
</html>
:lol:

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