Jak zrobić środkowy div, aby wypełnić przestrzeń między elementami pływającymi?

Mam trzy elementy div: lewy, środkowy i prawy. Lewe i prawe są stałe i pływające. Chcę tegośrodkowy div, aby wypełnić lukę między nimi.

To jest mój kod:

<!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>

Jakieś pomysły, jak to zrobić? Próbowałem różnych rozwiązań, ale nie udało mi się zrobić tego, co chcę.

questionAnswers(2)

yourAnswerToTheQuestion