CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

Question

Apologies for the convoluted title. Here's my fiddle:

http://jsfiddle.net/PTSkR/152/

If you drag the result pane out to be wider, you can see the blue areas jump up. They're supposed to always be up there, filling up whatever area the sidebar (width 275px) doesn't. I tried to use this:

width: calc(100%-275px);

But it doesn't seem to be doing the trick. Any idea how I can get this working as expected?

HTML:

<div id="page-content" class="container-fluid page-host">
<div id="shell-row" class="row-fluid">
     <div id="sidebar" class="sidebar-nav span2">
     </div>
     <div id="browser-body" class="span10">
        <ul class="breadcrumb">
        </ul>
        <div id="container">
        </div>
     </div>       
</div>
</div>

CSS:

    #page-content {
    padding: 0px;
    margin-top: 0px;
    height: 100% !important;
}
#shell-row {
    height: 100%;
}
#sidebar {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #f0f0f0;
  height: 100%;
  width: 275px !important;
}

#browser-body {
  margin: 0px 0px 0px 0px !important;
    background-color: lightblue;
    width: calc(100%-275px);
}
#browser-body.span10 {
  margin: 0px 0px 0px 0px !important;
}
.breadcrumb {
  background-color: #d0f0f0;
  margin: 0px;
  width: 100%;
  border-radius: 0px;
  padding: 0px;
  height: 40px;
  line-height: 40px;
}
#container {
  padding: 10px;
  width: 100%;
}
html, body{height: 100%;}

Answer 1

There needs to be space between the operand, like so:

width: calc(100% - 275px);

Take a look at this. Right above "examples" the following note is there:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.