title: CSS minimum width on overlay with fixed position that is centered
body: <p>I have a page where the content is positioned in the center of the page using margin:auto and I want to add a background that is centered the same way but because of the background doesn't appear when I scroll down I have resorted to using position:fixed which nicely does the trick.</p>
  
  <p>However, positioning it centrally the same way as the content is proving a huge challenge because playing with left:x% and margin-left:-y% is a nightmare and never quite works well that all screen resolutions.</p>
  
  <p>The markup is simple:</p>
  
  <pre><code>&lt;div id="main" class="container"&gt;   
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see the site <a href="http://www.psgardensltd.co.uk/new/" rel="nofollow">HERE</a></p>
  
  <p>The BEST CSS configuration I came up with is this:</p>
  
  <pre><code>.overlay
  {
    position: fixed;
    top: 0; /* These positions makes sure that the overlay */
    bottom: 0;  /* will cover the entire parent */
    left: 0;
    width: 72%;
    margin-left:14%;
    height:100%;
    background: #000;
    opacity: 0.45;
    -moz-opacity: 0.45; /* older Gecko-based browsers */
    filter:alpha(opacity=45); /* For IE6&amp;7 */
  }
  </code></pre>
  
  <p>I've tried many combinations but the background always resized differently than the content and I would want it to stay in place.
  Position:absolute with margin:auto works perfectly well except when you scroll down.</p>
  
  <p>The above configuration works nicely except the "min-width". If I could get it to stop minimizing after a certain point, this would be perfect.</p>
  
  <p>Many thanks in advance if you have a solution to this</p>