DIV that takes up the available width to the left of it - html

Question

I was developing a mental picture of a future website I'm building and stumbled on a question I cannot answer.
Basically, there is going to be a vertical navigation menu about 180px wide. The height will be set to 100% and the position:fixed; top:0;. This way, the div will follow you as you scroll along the page... However, the problem is, that div will have a different background color then the body or the rest of the page and I'm trying to nest the div inside a 980px wide page. I want everything to the left of that div to be the same background color. The reason why I cannot specify the width is because it will be 180px for the navigation, but the width will be 180px + whatever's to the left of the menu. To understand clearly, this is a flexible solution but does not have the left of the div set to the right color: http://jsfiddle.net/kkFc7/ This is a solution that accomplishes the look I want, but only in 1200px wide browsers http://jsfiddle.net/kkFc7/1/ if the browser was wider, it would just stay to the left of the window but I don't want that. I want the div to be held inside the container, but the background color to the left of it should be the same.
The algorithm is something like ((browserwidth-800px)/2)+180px=Width of div#menu.
I'd prefer not to use any algorithms or JavaScript to accomplish. Does anybody know some CSS tricks that will get me a flexible DIV that takes up the width to the left of it?

Answer 1

can create a div that takes up 50% of the width behind the #content div
jsfiddle example (full-screen)
like so
<div id="menu-bg-color-matchtastic"></div> <!-- <<< Add this div -->
<div id="content">
<div id="menu">
Hello<br>
Goodbye
</div>
</div>
add similar attributes as the menu, background color, position fixed...
#menu-bg-color-matchtastic {
position:fixed;
width:50%;
height:100%;
left:0;top:0;
background:#494949;
}
make #content position relative with a white bkgd so our new div stays behind the content
#content {
width:980px;
height:2000px;
margin:0 auto;
background:#fff; /* <<< Add this */
position:relative; /* <<< and this */
}