right - Diseño de CSS de tres columnas: ancho fijo/máximo/variable

float divs

Question

Tengo problemas para que funcione el siguiente diseño de tres columnas:

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

Dónde:

• A es ancho fijo.
• B usa cualquier espacio disponible en el contenedor no utilizado por las columnas A y C.
• C contiene contenido que puede cambiar el ancho y necesita "empujar" B a un ancho diferente.

Este es mi mejor intento de crear esto: http://jsfiddle.net/x3ESz/

Todos los otros temas que he analizado sugieren que los tres floten con B utilizando márgenes para evitar el ajuste, pero esto no permite que C cambie 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 se puede resolver fácilmente agregando overflow: hidden to #div_middle y eliminando 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 e IE7 +.

Answer 2

Puede arreglarlo sin cambiar su diseño si usa este script:

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

Answer 3

Incluso funciona con ambas barras laterales de ancho 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;
}