[Resolvido] Div com largura ajustável

31 de julho de 2013 9 respostas

augustovieira 31 de julho de 2013

Olá pessoal! Estou com uma dúvida simples de HTML que não estou conseguindo resolver. O problema é o seguinte. Quero ter 3 divs, uma ao lado da outra, sendo a do meio com largura de 100%, onde aumentando e diminuindo a janela somente ela irá aumentar ou diminuir. Segue o código de teste que fiz até agora.

<html>
	
	<head>
		
		<style>
			#div1{float:left;width:100px;height:100px;background-color:red;}
			#div2{float:left;width:100px;height:100px;background-color:blue;}
			#div3{float:left;width:100px;height:100px;background-color:yellow;}
		</style>		

	</head>

	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>


</html>

9 Respostas

Slow17 31 de jul. de 2013

Você quer mudar de pixel para porcentagem é isso mesmo O.O
para ela ser ajustavel é só mudar de 100px para 100%
e vai regulando o tamanho disso ai…

augustovieira 31 de jul. de 2013

Meu amigo, isso eu sei bem, porém se eu altero de 100px para 100% ele vai quebrar a linha. O que não estou conseguindo fazer é deixar o quadro(DIV) do meio 100% e manter o div 1 a esquerda e div3 a direita. Consegue me entender agora?

Slow17 31 de jul. de 2013

Bom,você podia criar uma div principal.colocar tudo dentro dessa div principal,colocar overflow:hidden,regular ela pra prender os três componentes lá,dar um float left em um,float rigth em outro,e deixar o de porcentagem no meio

augustovieira 31 de jul. de 2013

Quase deu certo, o terceiro quadro(DIV3) está ficando na linha de baixo, porém o quadro de porcentagem já ficou certo, segue o código:

<html>
	
	<head>
		<style>
			#principal{overflow:hidden;}
			#div1{float:left;width:100px;height:100px;background-color:red;}
			#div2{width:100%;height:100px;background-color:blue;}
			#div3{float:right;width:100px;height:100px;background-color:yellow;}
		</style>		
	</head>

	<body>
		<div id="principal">
			<div id="div1">TESTE1</div>
			<div id="div2">TESTE2</div>
			<div id="div3">TESTE3</div>
		</div>
	</body>


</html>

Slow17 31 de jul. de 2013

Ela está ficando embaixo porque as outras são muito grandes,se tu ir regulando vai conseguir deixar as três topo
(ou você aumenta a div principal também,define o width dela como a soma do width das três)

augustovieira 31 de jul. de 2013

Como assim regulando jovem? Eu quero que ele regule sozinho, por isso coloco 100% na div do meio. Quero que fique o primeiro quadro com 100px, o terceiro quadro com 100px e o quadro do meio se ajuste com a largura que sobrar. Se eu tiver que ficar regulando a percentagem não serve de nada.

Slow17 31 de jul. de 2013

eu só falei que você pode aumentar a div principal para caber as três divs no topo

augustovieira 31 de jul. de 2013

Na verdade não era bem isso jovem, mas obrigado pela sua ajuda. Fiz um simples exemplo aqui e acabei conseguindo o que eu queria. Segue a solução:

<html>
	
	<head>
		<style>
			#principal{overflow:hidden;width:100%;}
			#div1{float:left;width:100px;height:100px;background-color:red;}
			#div2{width:100%;height:100px;background-color:blue;}
			#div3{float:right;width:100px;height:100px;background-color:yellow;}
		</style>		
	</head>

	<body>
		<div id="principal">
			<div id="div1">TESTE1</div>
			<div id="div2">TESTE2
				<div id="div3">TESTE3</div>
			</div>	
		</div>
	</body>


</html>

Mais uma vez obrigado!

Slow17 31 de jul. de 2013

Coloca resolvido lá no titulo então

Criado 31 de julho de 2013

Ultima resposta 31 de jul. de 2013

Respostas 9

Participantes 2

9 Respostas

Topicos relacionados