CSS. 2 column div layout: right column with fixed width, left fluid

Необходимо создать layout из двух div элементов, стоящих друг за другом  - как два столбца одной таблицы. Причем необходимо чтобы один столбец был фиксированной ширины, а другой изменялся в зависимости от размеров окна и занимал все оставшееся место.

>>> Работающий пример <<<

Создадим разметку в HTML

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

У нас есть родительский элемент - div с классом container и два дочерних div элемента с классами right и left.

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

Сделаем правый div с фиксированной шириной, а левый с изменяемой.
Также важно заметить что хоть правый div в конечном итоге будет располагаться вторым, в исходном HTML коде он должен находиться первым.

Для того чтобы выровнять div элемент по правому краю и зафиксировать его ширину сделаем следующее - зададим ему ширину свойством width и выровняем по правому краю свойством float. 

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

Для наглядности зададим цвет фона для этого div элемента.

Теперь сделаем левый div изменяемым и независимым от правого. Для того, чтобы при изменении размеров экрана этот div не обтекал соседний а оставался в своих границах добавим свойства width: auto и overflow: hidden.  

.left {
    background: #e8f6fe;
    width: auto;
    overflow: hidden;
}​​

Также добавим свойства overflow: hidden и height (может быть auto) к div элементу, который является контейнером.

.container {
   height: auto;
   overflow: hidden;
}

Заключение

Если правый div имеет свойства float и width, и если левый div не имеет width и float, то левый будет гибким