CSS → Вывод в одной строке фиксированного и резинового элемента

Несколько способов вывода в одной строке фиксированного и резинового элемента:

1. float:left + float:none

Самый простой способ, когда фиксированный элемент флоатится, а резиновый нет:

.fixed {
  float: left;
  width: 200px;
}
.fluid {
  margin-left: 200px;
}

https://jsfiddle.net/xandeadx/09fcx78e/

Минусы:

1. Дублирование размера фиксированного элемента (сначала в width, потом в margin-left)
2. Внутри резинового элемента нельзя делать clear:left или clear:both, иначе дочерний элемент съедет под фиксированный (демо). Решается созданием враппера внутри .fluid с заданием ему нового контекста форматирования.

2. Отрицательный margin

Способ, используемый для создания многоколоночных раскладок:

.wrapper {
  margin-left: 200px;
}
.fixed {
  float: left;
  width: 200px;
  margin-left: -200px;
}
.fluid {
  float: left;
  width: 100%;
}

https://jsfiddle.net/xandeadx/y03qecqe/

Минусы:

1. Дублирование размера фиксированного элемента (margin-left, width)
2. Ограниченные возможности стилизация враппера, поскольку фиксированный элемент выходит за его пределы (демо). Решается созданием дополнительного враппера.

3. position:absolute

Фиксированный элемент позиционируется абсолютно, а резиновому устанавливается левый отступ:

.fixed {
  position: absolute;
  width: 200px;
}
.fluid {
  margin-left: 200px;
}

https://jsfiddle.net/xandeadx/6dat0x4c/

Минусы:

1. Дублирование размера фиксированного элемента (width, margin-left)
2. Можно использовать только если резиновый элемент по высоте равен или больше фиксированного, или если известна высота фиксированного элемента, чтобы была возможность установить min-height для резинового.

4. display:table + display:table-cell

Эмуляция таблицы:

.wrapper {
  display: table;
  width: 100%;
}
.fixed {
  display: table-cell;
  width: 200px;
}
.fluid {
  display: table-cell;
}

https://jsfiddle.net/xandeadx/nc7d0qq5/

Минусы:

1. Высота элементов будет одинаковая
2. Невозможно задать внешние отступы для элементов
3. Другие ограничения и особенности поведения таблиц

Большинство минусов решается созданием дополнительных врапперов внутри элементов.

5. float:left + calc()

Использование css3 функции calc() для вычисления ширины резинового элемента:

.fixed {
  float: left;
  width: 200px;
}
.fluid {
  float: left;
  width: calc(100% - 200px);
}

https://jsfiddle.net/xandeadx/m6qyxhvo/

Минусы:

1. Дублирование размера фиксированного элемента
2. Не будет работать в Opera Mini

6. Flexbox

Использование флексбокса:

.wrapper {
  display: flex;
}
.fixed {
  flex: 0 0 200px;
}
.fluid {
  flex-grow: 1;
}

https://jsfiddle.net/xandeadx/g8sq6d3p/

Минусы:

1. IE 11+