-3

I have on my page 2 divs: one (left) with menu and second (right) with content. Right div must have width of 800px and be horizontally centered. I want left div to fill all remaining space.

I tried setting display of the divs as table-cell or setting float to right and left and putting in left div span element with width:100%, but it didn't work.

Is there any way to make the divs look as I want?

macia102
  • 3
  • 2
  • Very similar questions have been asked before, look under "Related" for various links... – Marc Audet Jun 11 '13 at 11:50
  • 1
    @cimmanon isn't his question the opposite? – Mohammad Areeb Siddiqui Jun 11 '13 at 11:57
  • 1
    @AreebSiddiqui Left fixed, right full vs right fixed, left full = same difference. You reverse the solution, it's not hard. I'm sure if one searched hard enough, this exact question has already been asked 100 times. – cimmanon Jun 11 '13 at 12:21
  • right div isn't fixed it has margin-left:auto and margin-right:auto to make it centered. That's why I didn't find solution to my problem. – macia102 Jun 11 '13 at 19:19

1 Answers1

2

Try this:

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

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113