Макет с двумя столбцами, один из которых имеет фиксированную ширину в CSS

Для этого вы должны использовать свойство CSS «float». Проверьте простая реализация здесь. А можно найти чуть подробнее статья здесь

Я думаю, ты мог бы сделать что-то подобное.

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

Это зависит от #col1, предшествующего #col2, что может сделать его непригодным для использования.

Этого не будет, но полагается на то, что #col1 длиннее:

#content {
  position: relative;   
}
div#col2 {
  width: 160px;
  position: absolute;
}

div#col1 {
  width: 100%;
  margin-left: 160px;
}

Так нижний колонтитул останется на месте.

div#footer {
  clear: both;
}

Ни одно из вышеперечисленных действий не сработает.

div#col2 {
    width: 160px;
    float: left;
    position: relative;
}

div#col1 {
    width:100%;
    margin-left: 160px;
}

Предполагается, что столбец 2 должен отображаться как левая боковая панель с основным содержимым столбца 1.

Вы должны использовать float: left в первом столбце и float: right во втором столбце

Хотя вопрос задан много лет назад, я предоставлю этот полезный ответ для любых будущих справок и подобных случаев.

Поместив #col1 перед #col2 в разметку, вы можете переместить его вправо, если у вас есть LTR lauout (если у вас есть макет RTL, перемещайте влево) и укажите другой столбец overflow: hidden.

Обратите внимание, что родительский элемент (#content) также должен иметь overflow: hidden:

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}

<div id = "content">
     <div id = "col1"></div>
     <div id = "col2"></div>
</div>