css - 右の div の幅が固定されている場合、左の div を作成して使用可能なすべてのスペースを埋めます

Question

私のページには 2 つの div があります。1 つ (左) はメニュー、2 つ目 (右) はコンテンツです。右側の div の幅は 800 ピクセルで、水平方向の中央に配置する必要があります。左の div で残りのスペースをすべて埋めたい。

divの表示をtable-cellに設定したり、floatを左右に設定して、左のdivのspan要素をwidth:100%で入れたりしてみましたがだめでした。

div を希望どおりに表示する方法はありますか?

Answer 1

これを試して：

HTML

<div id="left">
    Menu
</div>
<div style="text-align: center;">
<div id="right">
    Content
</div>
</div>

CSS

#left {
    background-color: green; /*for demonstration purposes*/
    float:left;
}

#right{
    background-color: blue;
    width: 800px;
}

JS

$(document).ready(function(){
    var width = $(document).width();
    var rightDivWidth = $("#right").width();
    var leftDivWidth = width - rightDivWidth;
    $("#left").css("width", leftDivWidth);
});

デモンストレーション