¿Como hacer esto?

n0ck · #1 (**permalink**) 29/01/2013, 08:38

Buenas tardes,

tengo una duda bastante sencilla pienso, pero no hay forma de conseguirlo, el caso es que estoy tratando de hacer dos contenedores, uno ajustado a la izquierda con unas medidas fijas de 430px y otro a su derecha con un ancho variable, es decir, el de la izquierda siempre quedará igual independientemente de la resolución de pantalla, pero el de la izquierda variará dependiendo de ancha que sea la ventana, ahora bien la pregunta, ¿como consigo un contenedor fijo y otro variable que queden pegados siempre uno al lado del otro pero solo el de la derecha se ajuste a la resolución de pantalla?

muchas gracias de antemano

un saludos a todos

C2am · #2 (**permalink**) 29/01/2013, 18:23

Hola
Es cierto es una duda bastante sencilla, y NO es cierto que no hay forma de conseguirlo.

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#fija{
    background:#F00;
    float:left;
    width:430px;
    }
#auto{
    background:#000;
    width:100%;
    }   
</style>
</head>
 
<body>
<div id="fija">fija</div>
<div id="auto"> auto</div>
</body>

Saludos

ryugen · #3 (**permalink**) 29/01/2013, 20:18

Si dar soporte a IE7 ( http://caniuse.com/#search=table-cell ) no es tu obligación o no está en tus planes, esta es otra solución:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#auto{
    background:red;
    display:table-cell;
}
#fija{
    display:table-cell;
    width:200px;
    background:green;
}   
</style>
</head>
 
<body>
<div id="fija">fija</div>
<div id="auto"> auto</div>
</body>

Ejemplo en funcionamiento: http://jsfiddle.net/QHTeS/2/

Ventajas:

-- Altos dinamicos, sin importar que alto tenga el contenido ni de un lado ni del otro, ambos elementos tendrán el mismo alto. A diferencia del ejemplo de C2am, que cuando el que ocupa el tamaño restante sobre pase el alto del contenedor fijo comenzará a rodearlo (ver ejemplo: http://jsfiddle.net/p4bl1t0/nwguC/2/ )

Desventajas:

-- No compatible con IE7

-- Este tipo de display hace que el elemento herede las propiedades de una celda de tabla. Lo que hace que tenga ciertas restricciones, y ciertas propiedades no tengan efectos dentro de la misma. Como por ejemplo el posicionamiento absoluto, de hijos directos