Trzy-kolumnowy układ CSS - stały/max/szerokość zmienna

Question

Mam problemy otrzymuję następujący układ trzech kolumn do pracy:

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

Gdzie:

• jest. stała szerokość.
• B wykorzystuje w dowolnym dostępnym miejscu w pojemniku, które nie są stosowane w kolumnach A i C.
• C zawiera materiały, które mogą zmieniać szerokość i potrzebie „push” z B do A różnej szerokości.

Tu jest moja najlepsza próba stworzenia w ten sposób: http://jsfiddle.net/x3ESz/

Wszystkie inne tematy Mam spojrzał na sugerujemy posiadające wszystkie trzy pływający z B, stosując marże, aby zapobiec zawijania, ale nie pozwala na C, aby zmienić rozmiar B na podstawie zawartości C (jako wartość musi być podana dla prawego marginesu B).

Ja także bardzo chcę uniknąć uciekania się do JS, aby to osiągnąć.

Answer 1

ten można łatwo rozwiązać poprzez adding overflow: hidden do #div_middle i usuwanie marginesów:

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

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

ta działa we wszystkich nowoczesnych przeglądarek i IE7 +.

Answer 2

można naprawić bez zmiany układu, jeśli użyć tego skryptu:

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

Answer 3

ma nawet pracować z obu zmiennych Paski Szerokość:

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; 
}