CSS статическая ширина боковых колонн, мин-макс ширина центральной колонка содержания

Question

У меня есть следующая скрипка для людей, чтобы увидеть http://jsfiddle.net/defaye/DhaHP/4/ результат на полном экране: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/

Проблемы у меня в том, что, когда идет мимо определенная ширина изменения размера окна, левый столбец отходит от группы. Мне нужно, чтобы они оставались трогательными, а центральная колонка имела минимальную ширину 400 до максимальной ширины 800 пикселей, ширина сторон: 200 пикселей. Однако заголовок должен быть 100%.

Кто-нибудь знает, как решить эту проблему? Это сводит меня с ума.

Answer 1

Вот еще один пример, совместим с IE6 +: http://jsfiddle.net/DhaHP/12/ Результат: http://jsfiddle.net/DhaHP/12/embedded/result

Аннотация изменений:

• Изменено #left и #right должно быть выше #center (#right до #left);
• min-width и max-width на #container до 800px и 1200px соответственно;
• No float on #center;
• margin-left и margin-right на #center равно ширине каждой боковой колонны;
• float-left по адресу #left и float-right по #right;

Единственным об этом в IE6 является минимальная ширина и максимальная ширина, которая не работает без небольшого взлома или использования IE7.js. На IE7 он работает так, как должно быть.

Answer 2

Вот рабочая скрипку: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (редактирование: теперь работает с хромом)

Модификации сделана:

• HTML: #left перед тем #center колонок
• CSS: нет относительного позиционирования на всех
• display: table; на родителях и table-cell на 3 колонках. Это будет визуально (и только визуально) таблица. Ну, таблица, а не структура таблицы.
• 200px ширина на #left и #right
• на родитель, чтобы переключить алгоритм таблицы на тот, что соблюдать размеры, как сообщил автор, а не те, догадаться по размерам содержания клеток
• Ограничиваемых ширинов для родительский min-width: 800px; (400 + 200 + 200) и на родителях max-width: 1200px; (800 + 200 + 200) (изменить: максимальная высота на # контейнере работала только на Fx, а не на Chrome). К моему удивлению, он работает так, как есть.

Совместимость: IE8 +
Вы можете играть с инлайн-блок с IE6/7, если это необходимо (ну, display: inline; zoom: 1; IE6/7 эквивалент инлайн-блока для устаревших браузеров)