Dos columnas, izquierda con ancho fijo, derecha con ancho dinámico

Question

Estoy tratando de implementar un contenido donde necesito tener una sección del 100% del ancho del navegador y dentro de él tengo que tener en el tamaño izquierdo un div con 200px de ancho y en su lugar necesito tener un div con ancho dinámico dependiendo del ancho del navegador. Ejemplo ... browser = 900px -> left div 200px right div 700px. Y ambos tienen los divs altura dinámica en función de la cantidad de información que puse en ellos .. el div contenedor tendrá el mayor de los altura de 2 div ..

Hasta ahora he hecho algo como esto html

<section id="wrapper"> 
    <div id="list"> 
    </div> 
    <div id="grid"> 
    </div> 
</section> 

css

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 0; 
    overflow: hidden; 
} 

Ahora necesito la CSS y divs #list #grid. Espero que haya una solución eficiente para esto porque más adelante tendré las mismas cosas que hacer dentro de #grid div :)

¡Gracias de antemano, Daniel!

Answer 1

Puede hacerlo con CSS. El truco es usar un flotador (el div izquierdo) y un div no flotante (el derecho). También el div izquierdo (flotante) necesita tener una altura mínima, de lo contrario, el div correcto (no flotante) ocupará el espacio de la columna izquierda si el izquierdo no tiene ningún contenido.

EDIT: El derecho <div> también debe tener las siguientes reglas:

overflow: hidden; 
display: block; 

El overflow: hidden hace la derecha div comportarse como una columna, de lo contrario su contenido fluiría alrededor de la div izquierda.

Tenga en cuenta que #wrapper no necesita un ancho porque el ancho predeterminado de <div> es 100% (ya que dijo que ocupará todo el ancho de la ventana del navegador) y también elimina sus márgenes.

Aquí hay un ejemplo (Cambié el <section> al <div> por el bien de los navegadores que no son HTML5 pero funciona igual).

Puse colores de fondo para distinguir todos los elementos.

http://jsfiddle.net/pmv3s/1/

Aquí está la versión de pantalla completa: http://fiddle.jshell.net/pmv3s/1/show/light/

El CSS:

#wrapper { 
    padding: 40px 0; 
    overflow: hidden; 
    background-color: red; 
    min-height: 5px; 
} 
#list { 
    float: left; 
    width: 200px; 
    background-color: green; 
    overflow: hidden; 
    min-height: 100px; 
} 
#grid { 
    display: block; 
    float: none; 
    background-color: blue; 
    min-height: 100px; 
    overflow: hidden;  
} 

Answer 2

he aquí una solución para ti usando un poco de jQuery ya que no creo que haya una solución CSS pura para tu problema (pero puedo estar equivocado).

http://fiddle.jshell.net/L32uj/