CSS-автозаполнение контейнера между float: left & float: right divs

Я ищу способ CSS (3), чтобы иметь возможность автоматически регулировать ширину разделителя центрального контейнера между div float:left div и float:right.

В центре div также нужна возможность установить min-width, аналогичную google + → home, где центральное содержимое автоматически устанавливается между левыми навигационными кнопками и правой панелью чата. Затем, когда ширина экрана сжимается до определенной точки (обнаруженной с помощью javascript), панель чата сводит к минимуму, чтобы сэкономить место.

Вот активный макет, чтобы сделать работу: http://jsfiddle.net/9vrby/

Кроме того, вот код css, который я использую сейчас:

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

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, и заблаговременно за помощь.

Ответ 1

В #center отбросьте float: left и добавьте overflow: hidden. Кроме того, #center необходимо переместить в HTML.

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

Это работает во всех современных браузерах и даже в IE7.

Ответ 2

Один трюк - не использовать поплавки, а отображать: 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; }

Остерегайтесь, однако, этот метод не работает в IE7 (и ниже, но кто все еще поддерживает эту хрень?). Но, возможно, вы можете взглянуть на CSS3Pie, который позволяет использовать CSS (3) для браузеров, официально не поддерживающих его, как IE7. Поэтому, возможно, отобразится: table-cell будет работать также.