title: CSS issue: fixed footer with width of 100% is too wide
body: <p>I'm trying out using % instead of px and it behaves a bit strange.
  Why is my footer continuing to the right (outside the element "pagePlaceHolderInner")
  It works if I set both elements ("pagePlaceHolderInner" and "footer") to a certain px-number but I want to use % here.</p>
  
  <p>The code:</p>
  
  <pre><code>        &lt;html&gt;
          &lt;head&gt;
          &lt;style type="text/css"&gt;
          body #pagePlaceHolderOuter {
              background: #FFFFFF;
              height: 100%;
              left: 0;
              position: absolute;
              top: 0;
              width: 100%;
          }
          body #pagePlaceHolderOuter #pagePlaceHolderInner {
              background: none repeat scroll 0 0 yellow;
              height: 100%;
              margin: 0 auto;
              max-width: 1000px;
              min-width: 700px;
              width: 70%;
          }
          body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
              background: gray;
              bottom: 0;
              height: 20%;
              position: fixed;
              width: 100%;
          }
          &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
  
          &lt;div id="pagePlaceHolderOuter"&gt;
              &lt;div id="pagePlaceHolderInner"&gt;
                  &lt;h1&gt;Hi guys!&lt;/h1&gt;
                  &lt;div class="footer"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>Or check <a href="http://jsfiddle.net/g3nRF/" rel="nofollow">jsfiddle</a></p>