CSS: центрированный, жидкий левый, фиксированный правый, исходная упорядоченная компоновка с минимальной/максимальной шириной

Question

Названия говорят об этом. Я хочу CSS макет 2-колонки, что:

• центрирован - основное содержание центрируется на странице
• имеет фиксированный (пиксель) правая ширина столбца
• имеет жидкости левый столбец - использует вверх все доступное пространство минус правая ширина колонки
• является источником нумерованной - слева содержания столбца предшествует содержание правого столбца в источнике HTML
• позволяет при минимальной ширине - 760px в моем примере
• позволяет при максимальной ширине - 10 24px в моем примере

Если окно больше максимальной ширины, содержимое будет центрироваться на странице с максимальным значением. Если окно меньше максимальной ширины, содержимое заполняет 100% страницы, если только оно не меньше минимальной ширины, что приведет к появлению горизонтальной полосы прокрутки.

Я готов использовать некоторые незначительные javascript для обработки ширины min/max для браузеров, которые не поддерживают эти свойства (я смотрю на вас IE6), но я так же готов разрешить эту часть макета разлагаются.

Это пробка с таблицами. Я просмотрел буквально сотни примеров макетов, и ничто не может сделать все, что я прошу, хотя есть несколько близких. Кажется, что проблема заключается в том, чтобы получить текущую левую колонку и порядок источника в том же стиле. Я нашел несколько примеров фиксированного левого/жидкого права (напротив того, что я хочу) с правильным порядком источника, или текучей левой или фиксированной правой стороной без упорядочения источника, но не обоих.

Мне все равно, если он использует поплавки или отрицательные поля, но я бы хотел избежать абсолютного позиционирования.

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

Я настоятельно рекомендую проверить CSS templates at Dynamic Drive. Пятый один должен быть тем, что вы ищете (Fluid-Fixed). Просто добавьте max-width и min-width к основному элементу контейнера, и все должно быть установлено.

FYI, это действительно хорошие шаблоны для использования в качестве основы для макетов страниц. Игра с CSS - отличный способ узнать много о плаваниях и позиционировании, и это действительно помогло мне в первые дни разработки веб-сайтов.

Answer 2

Вы ищете что-то вроде этого? (Отрицательные поля + + поплавки надлежащий порядок источник + фиксированная правая)

http://blog.html.it/layoutgala/LayoutGala23.html

Дополнительные макеты на странице индекса: http://blog.html.it/layoutgala/

, а затем просто добавить/мин максимальную ширину в контейнер.

Answer 3

Моя попытка: http://www.ryankinal.com/fluid/

Это полностью не работает, хотя это только потому, что при очень малых размеров окна, мои отрицательные поля могут вызвать содержание упасть страницу.Вот теория:

1. контейнера в каком-то проценте
2. левой колонку на 100% емкость, и поплыла влево
3. правого столбца, завернутый в 0 ширине%, всплывают правую обертка
4. правого столбца в фиксированном ширина (200px в моем примере)
5. левого столбца и правый столбец влево края половины ширины правой колонки (100px в моем примере)

Итак, чем больше правая колонка, тем больше вероятность того, что содержимое упадет. Но это так близко, как я получил в хороший час или около того. Это также немного хакерский из-за обертывания правой колонки в постороннем div и использования переполнения: видимый.

Но это мои герцоги (на данный момент).