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.