Foros del Web - Ver Mensaje Individual

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