Contenedor de ajuste automático CSS entre flotador: izquierda y flotante: divs derecho

Question

Estoy buscando un modo para que CSS (3) pueda ajustar automáticamente el ancho de un div contenedor central entre float:left div y float:right div.

El centro div también necesita la capacidad de tener un conjunto min-width, similar a google + -> hogar, donde el contenido del centro se ajusta automáticamente entre los botones de navegación izquierdos y el panel de chat derecho. Luego, cuando el ancho de la pantalla se reduce un cierto punto (detectado con javascript), el panel de chat se minimiza para ahorrar espacio.

Aquí es un modelo a escala activa para hacer el trabajo: http://jsfiddle.net/9vrby/

También, aquí está el código CSS que estoy usando ahora:

#left{ float:left; width:200px; height:400px; border:1px solid #000; } 

#center{ float:left; width:auto; height:400px; border:1px solid red; } 

#right{ float:right; width:100px; height:400px; border:1px solid blue; } 

Por favor, hágamelo saber si usted necesita más información, y gracias de antemano por la ayuda.

Answer 1

En #center, suelte float: left y agregue overflow: hidden. Además, #center debe moverse a la última en el HTML.

http://jsfiddle.net/thirtydot/9vrby/14/

Esto funciona en todos los navegadores modernos e incluso IE7.

Answer 2

Un truco es no usar flotadores sino mostrar: table-cell.

http://jsfiddle.net/9vrby/8/

HTML:

<div id='left'></div> 
<div id='center'></div> 
<div id='right'></div> 

CSS:

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; } 
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; } 
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; } 

Tenga cuidado sin embargo, este método no funciona en IE7 (y por debajo, pero que todavía es compatible con esa basura de la derecha?) Pero quizás pueda echarle un vistazo al CSS3Pie que le permite usar CSS (3) para navegadores que oficialmente no lo admiten, como IE7. Entonces tal vez mostrar: table-cell también funcionará.