tres columnas diseño CSS - fijo/max/anchura variable

Question

estoy teniendo problemas para conseguir el siguiente diseño de tres columnas para trabajar:

A    B    C 
+-------+-------------------+------------+ 
|  |     |   | 
| Fixed | Use unused space | Resizable | 
|  |     |   | 
+-------+-------------------+------------+ 

Dónde:

• Un es. ancho fijo.
• B utiliza cualquier espacio disponible en el recipiente no se utiliza por las columnas A y C.
• C contiene contenido que puede cambiar el ancho y la necesidad de "empuje" B a una anchura diferente.

Aquí está mi mejor intento de crear este: http://jsfiddle.net/x3ESz/

Todos los otros temas que he mirado sugieren tener a los tres como flotante con B usando márgenes para evitar la envoltura, pero esto no permite C para cambiar el tamaño de B en función del contenido de C (como se debe dar un valor para el margen derecho de B).

También quiero evitar recurrir a JS para lograr esto.

Answer 1

Esto puede ser fácilmente resuelto por adding overflow: hidden a #div_middle y la eliminación de los márgenes:

#div_middle { 
    overflow: hidden; 
    border:1px solid #0F0; 
} 

Ver:http://jsfiddle.net/thirtydot/x3ESz/1/

Esto funciona en todos los navegadores modernos y IE7 +.

Answer 2

se puede arreglar sin cambiar su diseño si se utiliza este script:

$(document).ready(function() { 
    $('#div_right').click(function() { 
     $(this).append('--'); 
     $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px"); 
    }); 
}); 

Answer 3

siquiera trabajar con las dos barras laterales de anchura variable:

http://jsfiddle.net/QG2EU/

#div_left{ 
    float:left; 
    border:1px solid #F00; 
} 
#div_middle { 
    overflow: hidden; 
    border:1px solid #0F0; 
} 
#div_right { 
    float:right; 
    border:1px solid #00F; 
}