title: 2 column full height layout in IE6
body: <p>So I am trying to replicate this in IE6: <a href="http://lynet.ca/~alumb/layout.html" rel="nofollow noreferrer">http://lynet.ca/~alumb/layout.html</a><br>
  It works perfectly in FF and Chrome, but fails miserably in IE6. Any suggestions?</p>
  
  <p>Here is the full set of requirements:</p>
  
  <pre><code>+-----------------------------+
  | NavBar                      |
  |-----------------------------|
  |Menu | Content               |
  |     |                       |
  |     |                       |
  |     |                       |
  |     |                       |
  |     |                       |
  |     |                       |
  +-----------------------------+
  </code></pre>
  
  <ul>
  <li>NavBar is a set height in EM (say 2em)</li>
  <li>Menu is a set width in EM (say 10em) and fills to the bottom of the page</li>
  <li>There should be no global page scrollbar</li>
  <li>menu must scroll in place and not cover the navbar (like overflow:scroll)</li>
  <li>content is an iFrame that fills the full space available.</li>
  <li>layout must survive resising the browser</li>
  </ul>
  
  <p>I have tried css, but it results in a crazy amount of css and I still can't get the iframe to fill the space correctly.<br>
  I have tried tables, but I can't get the menu to scroll in the right way.<br>
  The only solution I have involves frames, but this is not really the route I want to go. </p>
  
  <hr>
  
  <p>Solution:<br>
  So after about 36 hours of bashing at it, I finally have a solution. The only way I could get this to work was with table based layouts. However, there is a quirk in Firefox that causes height:100% to be calculated differently than in every other browser, so I also had to add the position:fixed styling. This is mostly ignored by IE6 which falls back on the table based layout.   </p>
  
  <p>An example of the final layout can be seen here: <a href="http://lynet.ca/~alumb/working.html" rel="nofollow noreferrer">http://lynet.ca/~alumb/working.html</a></p>