Ответ 1

Обновление: разрешено с помощью Flexbox

Теперь, когда мы Flexbox (с более 95% поддержки глобально) этот макет (и другие) можно легко достичь без стилей, зависящих от исходного порядка.

Flexbox Пример:

HTML

<div class="flex-container">
   <div class="flex-column"> Big </div>
   <div class="fixed-column"> Small </div>
</div>

CSS

.flex-container {
   display: flex;
}
.flex-column {
   flex: 1;
}

.fixed-column {
  width: 200px;
}

Live Demo с помощью Flexbox

Решено использовать плавающие элементы

Трюк сопоставляет маркер остатков столбцов с шириной плавающих боковых панелей. Помните, что порядок источника имеет значение при использовании float, поэтому мы должны убедиться, что элемент с плавающей точкой появился первым.

Пример выравнивания по правому краю столбца:

HTML

<div id="Container">
    <div id="RightColumn">Right column</div>
    <div id="LeftColumn">Left column</div>
</div>

CSS

#RightColumn {
    float : right;
    width : 200px;
}

#LeftColumn {
    margin-right : 200px;
}​

Демо-версия

• Выровненный по правому краю столбец
• Маленькая колонка с левой выдержкой

Ответ 2

Вы float левый столбец и установите край минимальной ширины левого столбца.

<div id="Container">
    <div id="LeftColumn" style="float: left; margin-right: 200px;"></div>
    <div id="RightColumn" style="float: right; width: 200px;"></div>
</div>

ИЛИ

<div id="Container">
    <div id="RightColumn" style="float: right; width: 200px;"></div>
    <div id="LeftColumn" style="margin-right: 200px;"></div>
</div>

Ответ 3

Если вы не хотите плавать divs, вы можете сделать следующее:

.rightDiv {
  position: absolute;
  right: 0;
  width: 200px;
}

.mainDiv {
  position: absolute;
  left: 0;
  right: 200px;
}

Ответ 4

Да, это возможно. Установите правильный стиль столбца для float: right и width: 200px, а левый столбец будет содержимым и займет оставшуюся часть ширины.