CSS fluido 'columna'

Question

¿Cuál es la mejor manera de obtener este diseño en CSS? Imagine que tengo tres divs, dos divs dentro de otro ... de los dos div interiores, el primero tiene un ancho específico establecido, y el segundo div ocupa el espacio restante.

Generalmente termino configurando un ancho específico en la segunda columna, y administro la actualización de esto al final de que el ancho de div que contiene ha cambiado.

Si floto el fijo pero no el fluido, la columna de fluido se ajustará debajo del div fijo (no lo que se quiere).

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

Esto tiene que ser una solución completamente CSS, sin JavaScript frameworks- e idealmente funciona en los navegadores más utilizados con un mínimo 'hackage' (en su caso).

espero que los trabajos de arte ASCII,

Gracias.

Answer 1

el marcado

<div id="fixed">fixed content</div> 
<div id="fluid">fluid content</div> 

el css

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

Que debe hacer el truco. Lo uso en mi sitio personal. Los márgenes hacen que todo permanezca en el mismo nivel.

Answer 2

Esperamos que esto al menos le ayudará a empezar:

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

El "contenedor" div sería su envoltura. Solo configuré la columna de fluido a un ancho del 60% para que pudieras ver que debería actuar con fluidez. Probé esto en Opera 10, IE 6 y Firefox 3 con solo problemas menores. IE quiere agregar 200px adicionales a la derecha si establece el ancho de la columna de fluido al 100%. Estoy seguro de que hay una solución para esto en alguna parte.

Answer 3

Puede usar Emastic CSS Framework que admiten columnas de fluido. Aquí Link es un ejemplo de trabajo similar a su "trabajo de arte ASCII" :)

Answer 4

En realidad, hay una solución aún más fácil para esto que descubrí no hace mucho tiempo. Funciona bien hasta IE7. El div #fluid se deslizará hacia arriba junto al arreglo fijo y ocupará el espacio restante, a la vez que mantendrá una gran fluidez para todos los sitios receptivos.

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}