Как сделать средний 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>

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

Ответы на вопрос(2)

Ваш ответ на вопрос