Automatyczne dopasowywanie kontenera między float: left & float: right divs

Question

Poszukuję sposobu na CSS (3), aby móc automatycznie dopasować szerokość div elementu kontenera między div float:left div i float:right div.

Środkowy element div również musi mieć zestaw min-width podobny do google + -> home, w którym zawartość centrum jest automatycznie dopasowywana między lewym klawiszem nawigacyjnym a prawym panelem czata. Następnie, gdy szerokość ekranu zmniejsza się o pewien punkt (wykrywany przy użyciu javascript), okienko czata minimalizuje się, aby zaoszczędzić miejsce.

Oto aktywnym mock-up, aby praca: http://jsfiddle.net/9vrby/

Również tutaj jest kod CSS używam teraz:

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

Proszę dać mi znać, jeśli potrzebujesz więcej informacji, i z góry dziękuję za pomoc.

Answer 1

Na #center, upuść float: left i dodaj overflow: hidden. Ponadto, #center musi zostać przeniesiony do ostatniego w HTML.

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

ta działa we wszystkich nowoczesnych przeglądarkach, a nawet IE7.

Answer 2

Jedna sztuczka polega na tym, aby nie używać pływających obiektów, ale wyświetlać: komórki tabeli.

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

Uważaj jednak, ta metoda nie działa w IE7 (i poniżej, ale którzy nadal wspiera że gówno prawda?). Być może jednak możesz rzucić okiem na CSS3Pie, która umożliwia użycie CSS (3) dla przeglądarek, które oficjalnie go nie obsługują, jak IE7. Więc może wyświetlać: komórki tabeli również będą działać.