Как сделать средний div для заполнения пространства между плавающими элементами?

У меня есть три элемента div: левый, средний и правый. Левые и правые фиксированные и плавающие. Я хочу, чтобы средний div заполнил пробел между ними.

Это мой код:

<!DOCTYPE html>
<html>
<head>
   <style>
      * {border: dotted 1px red;}
      #left {
         width: 200px;
         float: left;
      }
      #middle {
         float: left;
      }
      #right {
         width: 200px;
         float: right;
      }
   </style>
</head>
<body>
   <div id="left"  >  left   </div>
   <div id="middle">  middle </div>
   <div id="right" >  right  </div>
</body>
</html>

Любые идеи о том, как это сделать? Я пробовал разные решения, но не смог сделать то, что хочу.

Ответы

Ответ 1

Ключ состоит в том, чтобы перестроить ваш html, чтобы иметь middle last, удалить float из middle и заменить его overflow: hidden.

Просмотреть пример скрипта.

HTML

<div id="left"  >  left   </div>
<div id="right" >  right  </div>
<div id="middle">  middle </div>

CSS

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}

Ответ 2

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

#left {
    width: 20%;
    float: left;
    background: #ccc;
}
#middle {
    width: 60%;
    float: left;
    display: block;
    background: #ddd;
}
#right {
    width: 20%;
    float: right;
    background: #bbb;
}

Здесь демо