title: Scrolling DIVs in IE6 with CSS
body: <p>I've been writing a small notice board site in ASP.NET and nothing i do will make it work properly in IE6. The main page has a header DIV, with the content region below it. Within this region are three further regions, a search facility in the top left, a list of notices below it, and the currently displayed notice to the right of these two. The search and notice list regions are 240px wide, and the displayed notice region takes up the rest of the width. The problem is that the notice list and displayed notice regions should both scroll if the content is bigger than the displayed area (i.e. overflow:auto style) but this doesn't happen in IE6. Everything else displayes fine. The layout is as follows:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
    &lt;head runat="server"&gt;
      &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /&gt;
      &lt;title&gt;Notice Board&lt;/title&gt;
      &lt;style type="text/css"&gt;
        body
        {
          margin:0;
          border:0;
          padding:0;
          height:100%;
          max-height: 100%;
          overflow: hidden; 
        }
  
        #header
        {
          position:absolute; 
          top:0; 
          left:0; 
          width:100%; 
          height:130px; 
          overflow:hidden; 
        }
  
        #footer
        {
          position:absolute; 
          bottom:0; 
          left:0;
          width:100%; 
          height:0px; 
          overflow:hidden; 
        }
  
        #content
        {
          position:absolute; 
          top:130px;
          left:0;
          bottom:0px; 
          right:0; 
          overflow:hidden; 
        }
  
        * html body
        {
          padding:130px 0 0 0; 
        }
  
        * html #content
        {
          height:100%; 
          width:100%; 
        }
  
        #leftdiv 
        {
          position:absolute;
          left:0;
          width:240px;
          top:0;
          height:100px;
          overflow:hidden;
        }
  
        #listdiv 
        {
          position:absolute;
          left:0;
          width:240px;
          top:100px;
          bottom:0px;
          overflow:auto;
        }
  
        #noticediv
        {
          position:absolute;
          left: 270px;
          right:0;
          top:0;
          bottom:0;
          overflow:auto;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id="form1" runat="server" method="post"&gt;
        &lt;div id="header" &gt;
          &lt;!-- Header content goes here --&gt;
        &lt;/div&gt;
  
        &lt;div id="content"&gt;
  
          &lt;div id="leftdiv"&gt;
            &lt;!-- Content region for the search facility goes here --&gt;
          &lt;/div&gt;
  
          &lt;div id="listdiv"&gt;
            &lt;!-- Content region for the notice list goes here --&gt;
          &lt;/div&gt;
  
          &lt;div id="noticediv" &gt;
            &lt;!-- Content region for the displayed notice goes here --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas?</p>