title: two column fixed-fluid-fixed css layout
body: <p>I'm trying to create a layout where there is a fixed width and <strong>fixed position</strong> sidebar on the left.</p>
  
  <p>The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="left-sidebar"&gt;
          sidebar
      &lt;/div&gt;
      &lt;div class="main-content"&gt;
          main
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>body {
      position: relative;
  }
  
  .left-sidebar {
      position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  }
  
  .main-content {
  position: absolute;
  top: 0;
  left: 220px;
  background: #f0f0f0;
  width: 100%;
  }
  </code></pre>
  
  <p>How can I have the main content div start at 220px from the left, but only fill the window width?</p>