input com position absolute

[euMesmo2 0]

Tenho uma pagina com um trecho parecido com esse:

<style>
	#f{
		position:absolute;
		top:50px;
		left:10%;
		right:10%;
		margin:0 60px;
	}
	#f input[type=text]{
		position:absolute;
		left:3px;
		right:105px;
	}
	#f input[type=submit]{
		position:absolute;
		right:2px;
		display:block;
		width:100px;
	}
</style>

<form id="f">
<input type="text"> 
<input type="submit">
</form>

Esperava com isso obter uma form com largura responsiva em que o campo de texto ocupa todo o espaço disponível para ele dentro do bloco form.

Porem ao testar tanto no chrome quanto no firefox obtenho um campo de tamanho fixo que não ocupa todo o espaço dentro da form como também excede a largura da form quando ela é menor que essa largura fixa.

 

Alguém sabe como contornar isso?

[samoelyeshua 15]

Quando for usar medidas(Ex: %) relativas tente usa-las por todo o site.

 

se vc quer que um elemento filho pegue o mesmo tamanho do elemento pai vc precisa especificar o WIDTH: 100%;

se o elemento pai for redimensionado o elemento filho também é redimensionado

[euMesmo2 0]

Bom, não acredito que colocar o botão de submit com dimensões percentuais seja uma boa ideia.

Seria bom também as margens da pagina em porcentagem porque assim elas não desperdiçam muito espaço em resoluções pequenas e evitam que o usuário desloque muito o campo de visão em resoluções maiores.

Se o "input type text" fosse substituido por uma div, por exemplo, as dimensões obtidas seriam exatamente o que desejo.

Porém isso não funciona para o input.

 

Obtive uma soluão paleativa com:

<style>
	#f{
		position:absolute;
		top:50px;
		left:10%;
		right:10%;
		margin:0 60px;
	}
	#f div{
		position:absolute;
		left:3px;
		right:80px;
	}
	#f input[type=text]{
		width:100%;
		padding-left:15px;
		padding-right:10px;
	}
	#f input[type=submit]{
		position:absolute;
		right:2px;
		display:block;
		width:100px;
	}
</style>

<form id="f">
<div><input type="text"></div> 
<input type="submit">
</form>

O layout ficou como esperado, mas não sei se manter a div que contem o campo texto menor que o campo texto é uma boa pratica.

 

Alguém tem alguma sugestão para contornar isso?

[samoelyeshua 15]

Quando vc cria um elemento e n diz qual o tamanho dele, ele ficar com tamanho total que ele pode ocupar