Databases
StackOverflow2013
Postsdbo
PO2 column full height layout in IE6
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO2 column full height layout in IE6
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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