[Resolvido] Div com largura ajustável

Front-end
#1

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>
#2

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…

#3

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?

#4

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

#5

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>
#6

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)

#7

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.

#8

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

#9

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!

#10

Coloca resolvido lá no titulo então :smiley:

#11