Estoy diseñando un encabezado que está hecho de 3 partes.

La página debe ser fluida:min-width:940px; max-width:1200px;

Las dos primeras partes del encabezado serán de tamaño fijo:

   left       middle        right
<---------><---------><----------------->
   134px      183px       (Fill the remaining space)

Me gustaría que la parte correcta cambiara dependiendo del tamaño de la página, pegaré lo que tengo hasta ahora, pero mi problema es que llene la brecha completamente.

HTML:

<div class="main">

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

CSS:

    .main{
        margin:auto;
        min-width:940px;
        max-width:1200px;
        background-color:#000;
    }

    .left{
    float: left;
    width: 134px;
    height: 191px;
    background-color:#0000ff;
    }
    .middle{
    float: left;
    width: 183px;
    height: 191px;
    background-color:#ffff00;
    }

    .right{
    float: left;
    width: 60%;
    height: 191px;
    background-color:#ff0000;
    }