[SOLUCIONADO] Input a 100% dentro de capa auto-ajustable

BrunoIV · #1 (**permalink**) 26/07/2013, 08:21

Hola, tengo dos capas: izquierda y centro.

La capa "izquierda" mide 180px, la capa "centro" ajusta el tamaño según el tamaño de la pantalla.

Dentro de la capa "centro" tengo un caja (input) que quiero que ocupe el 100% de la capa "centro".

Lo que pasa es que no ocupa el 100% de la capa "centro" sino el 100% de TODA la pantalla.

Si alguien me puede ayudar estaré agradecido, mi opción b es usar tablas, pero preferiría no hacerlo.

Código HTML:

<html>
<head>
<style>
    body {
        margin:0px;
    }

	
    .centro{
        background:#e0e0e0;
        min-width:400px;
        height:400px;
        width:100%;
        overflow: inherit;
    }

    .izquierda{
        width:180px;
        height:400px; 
        background:#91D0D0;
        float:left;
    }

    input[type="text"] {
        width: 100%;
    }
</style>
</head>
<body>


<div class="contenedor">
    <div class="izquierda"></div>
    <div class="centro"><input type="text" name="caja"></div>
</div>
</body>
</html>

Mikmoro · #2 (**permalink**) 26/07/2013, 08:47

Prueba poniendo a la caja centro tanto margen izquierdo como el ancho de la caja de la izquierda:

margin-left: 180px;

Mikmoro · #3 (**permalink**) 26/07/2013, 09:09

Pruébalo así:

Código HTML:

Ver original<html> 
<head>
<style>
    body {
        margin:0px;
    }
 
    .centro{
        background:#e0e0e0;
        min-width:400px;
        height:400px;
        overflow: inherit;
    }
 
    .izquierda{
        width:180px;
        height:400px; 
        background:#91D0D0;
        float:left;
    }
    #cajainterior {margin-left:180px;}
 
    input[type="text"] {
        width: 100%;
    }
</style>
</head>
<body>
<div class="contenedor">
    <div class="izquierda"></div>
    <div class="centro">
        <div id="cajainterior"><input type="text" name="caja" /></div>
    </div>
</div>
</body>
</html>

pzin · #4 (**permalink**) 26/07/2013, 09:38

Para que funcione correctamente que .centro ocupe el resto de su contenedor, tienes que indicar un valor diferente para overflow además de eliminar el ancho. Se quedaría tu regla así:

Código CSS:

Ver original.centro{
  background: #e0e0e0;
  height: 400px;
  overflow: hidden; /* o scroll también vale */
}

Si quieres que además mida al menos 400 pixeles, entonces es mejor indicar que el contenedor mida al menos 580 (.centro + .izquierda) porque si lo haces tal como lo tienes se te desarmará un poco.

Código CSS:

Ver original.contenedor {
  min-width: 580px;
}

¿Esa altura de 400px es sola para pruebas o quieres dejarla?

BrunoIV · #5 (**permalink**) 26/07/2013, 09:51

Gracias a los dos, la respuesta de Mikmoro funciona, ahora probaré la de pzin.

Doy el tema por solucionado.

PD: el 400px era para pruebas

Un saludo a los dos

Mikmoro · #6 (**permalink**) 26/07/2013, 12:07

Me alegro.
Saludos.