title: using display:table-cell with position:fixed
body: <p>I made one container <code>&lt;div&gt;</code>,and inside that one there are two <code>&lt;div&gt;</code>'s:
  one is width 80% and the other is 20% and need to be <code>position:fixed</code>.</p>
  
  <p>For some reason the total width of the container <code>&lt;div&gt;</code> is longer then the browser window.</p>
  
  <p>once I remove the <code>position:fixed</code> on the right <code>&lt;div&gt;</code> everything is in order but I do need that <code>&lt;div&gt;</code> to be <code>position:fixed</code>.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;div class="leftSummary"&gt;&lt;/div&gt;
      &lt;div class="rightTasks"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.test {
      width: 100%;
      display: table;
  }
  .leftSummary {
      width: 80%;
      display: table-cell;
  }
  .rightTasks {
      width: 20%;
      min-width: 275px;
      display: table-cell;
      vertical-align: top;
      position: fixed;
  }
  </code></pre>