сделать левый div, чтобы заполнить все свободное пространство, когда правый div имеет фиксированную ширину

Question

У меня на моей странице 2 divs: один (слева) с меню и второй (справа) с контентом. Правый div должен иметь ширину 800 пикселей и быть горизонтально по центру. Я хочу, чтобы левый div заполнил все оставшееся пространство.

Я попытался настроить отображение divs в виде таблицы или поместить float вправо и влево и поместить в элемент div div div с шириной: 100%, но это не сработало.

Есть ли способ сделать divs выглядеть так, как я хочу?

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

Demonstration