title: Fixed page layout in IE6
body: <p>Header, footer and sidebars have fixed position. In the center a content area with both scroll bars. No outer scroll bars on the browser. I have a layout that works in IE7 and FF. I need to add IE6 support. How can I make this work?</p>
  <p>Here is an approximation of my current CSS.</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
      &lt;html&gt;
      
      &lt;head&gt;
        &lt;title&gt;Layout&lt;/title&gt;
        &lt;style&gt;
          * {
            margin: 0px;
            padding: 0px;
            border: 0px;
          }
          
          .sample-border {
            border: 1px solid black;
          }
          
          #header {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 60px;
          }
          
          #left-sidebar {
            position: absolute;
            top: 65px;
            left: 0px;
            width: 220px;
            bottom: 110px;
          }
          
          #right-sidebar {
            position: absolute;
            top: 65px;
            right: 0px;
            width: 200px;
            bottom: 110px;
          }
          
          #footer {
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            height: 105px;
          }
          
          @media screen {
            #content {
              position: absolute;
              top: 65px;
              left: 225px;
              bottom: 110px;
              right: 205px;
              overflow: auto;
            }
            body #left-sidebar,
            body #right-sidebar,
            body #header,
            body #footer,
            body #content {
              position: fixed;
            }
          }
        &lt;/style&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
        &lt;div id=&quot;header&quot; class=&quot;sample-border&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left-sidebar&quot; class=&quot;sample-border&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right-sidebar&quot; class=&quot;sample-border&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;content&quot; class=&quot;sample-border&quot;&gt;&lt;img src=&quot;/broken.gif&quot; style=&quot;display: block; width: 3000px; height: 3000px;&quot; /&gt;&lt;/div&gt;
        &lt;div id=&quot;footer&quot; class=&quot;sample-border&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;
  </code></pre>