title: CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?
body: <p>Apologies for the convoluted title.  Here's my fiddle: </p>
  
  <p><a href="http://jsfiddle.net/PTSkR/152/" rel="noreferrer">http://jsfiddle.net/PTSkR/152/</a></p>
  
  <p>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: </p>
  
  <pre><code>width: calc(100%-275px);
  </code></pre>
  
  <p>But it doesn't seem to be doing the trick.  Any idea how I can get this working as expected?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="page-content" class="container-fluid page-host"&gt;
  &lt;div id="shell-row" class="row-fluid"&gt;
       &lt;div id="sidebar" class="sidebar-nav span2"&gt;
       &lt;/div&gt;
       &lt;div id="browser-body" class="span10"&gt;
          &lt;ul class="breadcrumb"&gt;
          &lt;/ul&gt;
          &lt;div id="container"&gt;
          &lt;/div&gt;
       &lt;/div&gt;       
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    #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%;}
  </code></pre>