[SOLUCIONADO] Ajustar form al contenedor

Numon · #1 (**permalink**) 14/05/2015, 08:27

Saludos.

He empezado hace poco con css y me he encontrado con un problema que no se muy bien como resolver.
Mi intención es que las fila del formulario estén ajustadas al div siempre, al tratarse de un div con width: porcentual cambia con la anchura del documento.

La primera no respeta el padding no comprendo porqué.

En la segunda mi intención es que el boton tenga un tamaño fijo y que el input de texto se adaptase al tamaño restante dejando algún margen entre ambos. El problema creo que viene de el width:auto; que no se ajusta, sino que viene con una anchura predeterminada, o eso creo.

He probado con varias combinaciones pero no lo logro. Si podéis echarme una mano lo agradecería mucho.

El HTML de la prueba:

Código HTML:

<html>
  <head></head>
  <body>
    <div class="caja--roja">
      <form action="" id="formulario">
        <input type="text" class="input--grande" />
        <input type="text" class="input--pequenio" />
        <input type="submit" class="btn--busqeda" />
      </form>
    </div>
  </body>
</html>

Su CSS:

Código HTML:

.input--grande{
   width: 100%;
   margin-bottom: 10px;
}

.input--pequenio{
  width: auto; 
}

.btn--busqeda{
  width: 50px;
  float:right;
}

.caja--roja{
  height: 100%;
  width: 50%;
  padding: 10px;
  background-color: #AD1B2E;
}

Tengo el código en Codepen:
http://codepen.io/anon/pen/EjKEXx?editors=110

Gracias.

NueveReinas · #2 (**permalink**) 14/05/2015, 08:33

Esto se soluciona con calc(), propiedad experimental de CSS.

Ver tabla de soporte: http://caniuse.com/#feat=calc

Código CSS:

Ver original.input--pequenio{
  width: calc(100% - 60px);
}

http://jsfiddle.net/4fcoucdv/

Numon · #3 (**permalink**) 14/05/2015, 08:49

Gracias eso solucionaría mis problemas, una pena que no esté aun extendido XD.

NueveReinas · #4 (**permalink**) 14/05/2015, 09:02

Cita:

Iniciado por Numon

Gracias eso solucionaría mis problemas, una pena que no esté aun extendido XD.

Los mayores inconvenientes son, como siempre, Internet Explorer, y por otra parte ni Safari ni iOS Safari soportan unidades vw, vh, etc. Pero bueno, si vas a usar px, todo bien.