title: Element width 100% of PAGE (not browser window)
body: <p><strong>Edit:</strong> For the sake of simplicity, I reduced my problem with overlay (see Background below) to width of a div. By doing that I however created a different and somewhat artificial problem. The accepted answer solves my real problem. The "reduced" problem is not solved there.</p>
  
  <p>How can I make div with width equal to 100% of the page width? (without setting fixed <code>min-width</code>)</p>
  
  <p>Seemingly, the solution is trivial. <code>&lt;div&gt;</code> with its 100% width should be OK by itself. That works fine unless you shrink the browser window below the page width (that's when scroll bars appear). Then the width of the <code>&lt;div&gt;</code> element is equal to the window size, not to the page size.</p>
  
  <p>A note on the demonstration code: The first div simulates the page width. The divs below are my attempts to achieve an element wide across all page. If the page is big enough (more than 500px), they are rendered as expected - all over the page. But if you shrink the window (below 500px) and scroll bar appears, then the divs also shrink, although I want them to stay at 500px.</p>
  
  <p>Here's the code, or check it out on <a href="http://jsfiddle.net/32mcsxbk/" rel="nofollow">jsFiddle</a> if you prefer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* just to see sizes of the elements */
  div {
    border: 1px solid red;
  }
  
  /* this simulates the width of the actual page content */
  div#fixed {
    width: 500px;
  }
      
  div#full1 {
    width: 100%;
  }
  
  div#full2 {
    width: 100%;
    min-width: 100%;
  }
  
  div#full3 {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  /* this works fine, but uses fixed size min-width, I cannot use */
  div#fullOK {
    width: 100%;
    min-width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="fixed"&gt;Width fixed to 500px&lt;/div&gt;
  The DIVs below are attempts to achieving 100% width despite scrolling. All work only if the window is wider than 500px.
  &lt;div&gt;default&lt;/div&gt;
  &lt;div id="full1"&gt;just width 100%&lt;/div&gt;
  &lt;div id="full2"&gt;width and min-width 100%&lt;/div&gt;
  &lt;div id="full3"&gt;run out of ideas&lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="fullOK"&gt;fixed min-width is the only thing that works (unusable for me though)&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Background: I have a page, which has an editor area that can be resized by the user. It has a    modal dialog windows support, which - when invoked - shows a window and covers the rest of the page by a semi-opaque background with height and width set to 100%. It works well, unless it is viewed in window smaller than the page. Then scrolling shows part of the page not covered by the background, which looks ugly. I need to have this background spanning all over the page, not just over the visible area. Setting <code>min-width</code> and <code>min-height</code> could be done only with the help of JavaScript (due to unknown page size, as the user can resize the canvas) and I'd prefer avoiding that.</p>