Ich entwerfe einen Header, der aus 3 Teilen besteht.

Die Seite muss flüssig sein:min-width:940px; max-width:1200px;

Die ersten beiden Teile des Headers haben eine feste Größe:

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

Ich möchte, dass sich der richtige Teil ändert, abhängig von der Größe der Seite. Ich füge das ein, was ich bisher habe, aber mein Problem ist, dass es die Lücke vollständig ausfüllt.

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;
    }