Как разместить блок между зафлоачеными элементами?

Question

[алексей]

Нужно сделать следующую сетку в шапке:
Блок прижатый к левому краю -- Блок по центру страницы -- Блок прижатый к правому.
Если с float left\right понятно, то как позиционировать между ними ровно по центру, а не за счет вычисления отступа? Размеры центрального блока будут меняться под содержимое.
Если выравнивать центральный за счет margin: 0 auto, то правый блок смещается вниз на строку. Если задавать центральному float, то на центр не оттащить потом через автоматические отступы, только напрямую задавая в пикселях.

<div class="header">
       <div class="left">
       <div class="center">
       <div class="right">
  </div>

.header {
   width: 100%;
   height: 100px;
}

.left {
  width: 143px;
  height: 38px; 
  float: left;
}

.center {
  width: 250px;
  height: 38px;
  margin: 0  auto;
}

.right {
  width: 100px;
  height: 38px;
  float: right; 
}

Answer 1

[Adikjoro]

Рекомендую Flexbox-верстку и Bootstrap Grid. Начинай изучать прямо сейчас).

Answer 2

[Astrohas]

https://jsfiddle.net/8vbyv5sz/1/ так?
или так https://jsfiddle.net/8vbyv5sz/2/ ?

Answer 3

[Артём Ведищев]

Мой вариант
https://jsfiddle.net/fh61e0re/
Коментарии приветствуются...

Answer 4

[Exploding]

Ну можно вот так:

.center {
  width: calc(100% - 243px);
  height: 38px;
  margin: 0  auto;
}

типа обертки будет, а в него упихнуть если надо на 250рх и отцентрировать
И вы забыли дивы позакрывать...

Answer 5

[алексей]

Разобрался, в html-коде, центральный блок должен идти после зафлоаченых.

<div class="header">
       <div class="left">
       <div class="right">
       <div class="center">
  </div>

И сразу правый сместился обратно на ту же строку, где и остальные оО