¿Cómo hacer div medio para llenar el espacio entre elementos flotantes?

Tengo tres elementos div: izquierdo, medio y derecho. Izquierda y derecha son fijas y flotantes. Lo que quiero es eldiv medio para llenar el vacío entre ellos

Este es mi código:

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

¿Alguna idea sobre cómo hacer esto? Probé diferentes soluciones pero no logré hacer lo que quiero.

Respuestas a la pregunta(2)

Su respuesta a la pregunta