Ajustar el ancho de caja de texto

Nexus10 · #1 (**permalink**) 04/05/2011, 05:14

Hola a tod@s.

Tengo el siguiente código html (simplificado):

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Titulo</title>
    <link rel="stylesheet" type="text/css"  href="estilos/estilo_form.css" />	
  </head>
  <body>
    <div id="principal">
   	  <form id="form" name="form" action="tratar.php" method="post">  	    
   	    <div id="intervalo">		  		      
		  <label>Hora ini:</label>
		  <select id="hora_ini" name="hora_ini">
		    <option value=""></option>
		    <option value="00">00</option>
		    <option value="06">06</option>
		    <option value="12">12</option>
		    <option value="18">18</option>
		    <option value="24">24</option>			   
		  </select>
		  <label>Hora fin:</label>
		  <select id="hora_fin" name="hora_fin">
		    <option value=""></option>
		    <option value="00">00</option>
		    <option value="06">06</option>
		    <option value="12">12</option>
		    <option value="18">18</option>
		    <option value="24">24</option>	
		  </select>
		  <label>Prob.:</label>
		  <select id="prob" name="prob">
		    <option value=""></option>
		    <option value="0">0</option>
		    <option value="50">50</option>
		    <option value="100">100</option>			   						
		  </select>
		  <label>Texto:</label>
		  <input class="text" id="com" value="" type="text" />	  
		  <div id="envio">
	            <button type="button" name="generar">Generar</button>
	          </div>
  	  </div>		
    </div>
  </body>
</html>

Al div con id="intervalo" le he puesto un ancho de 720px y un estilo para que se vea el recuadro.
Estoy intentando conseguir que la caja de texto se extienda hasta el final del div, para lo cual he calculado que ancho debería tener y he puesto lo siguiente:

Código:

input{width:315px}

El ancho de los select los he dejado por defecto.
La cuestión es que en unos navegadores se ajusta hasta el final, pero en otros se queda corta. Incluso en el mismo navegador, dependiendo de la versión, se ajusta de una manera o de otra.
Como soy muy tiquismiquis para estas cosas, me gustaría saber si hay alguna forma de ajustar la caja de texto para que se extienda hasta el final del div en todos los navegadores.

Gracias. Un saludo.

IsaBelM · #2 (**permalink**) 04/05/2011, 07:39

prueba con unidades relativas

Nexus10 · #3 (**permalink**) 04/05/2011, 10:16

Sí, ya suponía que sería con unidades relativas, pero he estado haciendo pruebas y no lo consigo.
Pensé que se podía conseguir metiendo el input en un div y luego darle al input un ancho de 100%, pero no sale lo que quiero. Hay algo que falla y no sé que es.