2-Column Div Mayout: достижение правого столбца с фиксированной шириной и жидкой левой столбцы

Challenge:

создание Двухтоколонный макет, где правая столбца имеет фиксированную ширину, в то время как левый столбец динамически приспосабливается к доступному пространству. Реализуйте макет, используя Float и Margin, но сталкивается с проблемами. Руководства:

удалить поплавок в левом столбце:

удалить свойство Float из левого столбца (#Content).

повторно по заказу HTML Columns:

поместите правый столбец (#Right) перед левым столбцом в код HTML. Это гарантирует, что в первую очередь применяется ширина правого столбца. контейнер). Это предотвращает внутренние DOV из переполнения контейнера.

установил ширину левого столбца и переполнение:
1. установите ширину левого столбца в авто и добавьте переполнение: скрыто. Это позволяет столбцу заполнять оставшееся пространство и предотвращать взаимодействие с правым столбцом.
2. пример кода:
3. html:
   Правильное содержание с фиксированной шириной

   Левый контент с гибкой шириной
4. css:

. Контейнер { Высота: Авто; переполнение: скрыто; } .верно { Ширина: 180px; Поплавок: верно; Фон: #aafed6; } .левый { Плавание: нет; Фон: #e8f6fe; Ширина: Авто; переполнение: скрыто; }

demo:

vives [this jsfiddle] (https://jsfiddle.net/jackjoe/fxwg7/) для рабочей демонстрации. ]