title: Layout, absolute position issues in ie6
body: <p>I'm trying to produce something similar to an instant messaging type interface.</p>
  
  <p>the page has the following requirements:</p>
  
  <ul>
  <li>page is fixed (it doesn't scroll)</li>
  <li>fixed banner at top</li>
  <li>a scrollable panel in the center containing chat messages</li>
  <li>a fixed div at the bottom containing a textarea for input</li>
  </ul>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="banner"&gt;&lt;/div&gt;
  
      &lt;div id="content"&gt;
      &lt;div id="messageAndControlContainer"&gt;
  
          &lt;div id="messageContainer"&gt;
              &lt;div id="message"&gt;
                  &lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;
                  &lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;
                  &lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;
                  &lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;
                  &lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;&lt;p&gt;chat message&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div id="control"&gt;
              &lt;textarea&gt;enter your message&lt;/textarea&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's the JSfiddle: <a href="http://jsfiddle.net/bzMfe/1/" rel="nofollow noreferrer">http://jsfiddle.net/bzMfe/1/</a></p>
  
  <p>This works fine in modern browsers (as in JSFiddle), but in ie6 it is totally messed up. Any ideas please?</p>
  
  <p><img src="https://i.stack.imgur.com/Y1tzL.png" alt="Chrome 27.0"></p>
  
  <p><img src="https://i.stack.imgur.com/45DJf.png" alt="IE 6.0"></p>