Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed page layout in IE6
    text
    copied!<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><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&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="header" class="sample-border"&gt;&lt;/div&gt; &lt;div id="left-sidebar" class="sample-border"&gt;&lt;/div&gt; &lt;div id="right-sidebar" class="sample-border"&gt;&lt;/div&gt; &lt;div id="content" class="sample-border"&gt;&lt;img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /&gt;&lt;/div&gt; &lt;div id="footer" class="sample-border"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload