css - 幅を自動的に調整するインライン div

Question

2分割の場合 1 つは静的で、もう 1 つは動的です。つまり、1 つの div 幅は 400px にする必要があり (これは静的な幅があるため静的 div と呼びます)、もう 1 つの div は残りの幅を占有する必要があります (これは動的な幅があるため動的 div と呼びます)。また、動的 div には固定幅がなく、残りのすべてを占める必要があり、静的 div が左に浮くのに対し、右に浮く必要があります。私の主な問題は、Web サイトがアクティブなときにブラウザーを引き伸ばしているときに、大きな問題が発生することです。divが重なったり下がったりしたくありません。メニューが一定に保たれるように、動的 div の幅を調整したい。

私のコード例:

<style type="text/css">
    body{
        margin:0px;
    }
    #wrap{
        width:100%;
        min-width:1000px;
    }
    #static{
        width:400px;
        float:left;
        background-color:#930; /* Just to differentiate DIV */
    }
    #dynamic{
        float:right;
        background-color:#CF0; /* Just to differentiate DIV */
    }
    .menus{
        display:inline-block;
        padding-left:5px;
        padding-right:5px;
            width:80px;
    }
</style>
<div id="wrap">
    <div id="static">
        Logo comes here
    </div>
    <div id="dynamic">
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
    </div>
</div>

上記のコードでは、メニューはロゴからかなり遠くに表示されますが、ロゴのすぐ横に配置する必要があります (ただし、左にフロートする必要はありません)。また、動的 div の幅は、スペースを無駄にせずに表示されるように調整する必要があります。 .

これが CSS の外にある場合は、JS/jQuery コードを提案してください。

どんな助けでも大歓迎です。