So now it more or less works in ¿all? 'modern' browsers (let me know if you find one that doesn't). But still no dice in ie5 windows. To make it work for ie6 it's essential to have a doctype declaration that triggers standards mode. This page starts with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Starting with more or less any modern doctype with a full url will do. See the w3c page on valid doctypes and the microsoft page on standards vs. quirks in ie6.
Here's the css for this page:
<style type="text/css" media="all">
html, body, #content {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* hidden from non ie win browsers by the * html selector and this: \*/
* html body, * html {
overflow: hidden;
}
* html #content {
overflow: auto;
}
* html #frame {
position: absolute;
right: 16px;
}
/* 16px makes room for the scroll bar, ie mac starts reading again at the end of
this comment */
/* ie won't use the fixed or right properties because the above has precedence
*/
#frame {
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 20%;
/* just to make it pretty */
background: #bed;
color: #347;
}
p {
padding: .5em;
}
a {
color: #f00;
}
/* watch out for overlap with scrolling elements */
#content p {
margin-right: 25%;
}
</style>
Nothing stretches a page with class like fake latin:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum auctor aliquam sapien. Vivamus wisi. Integer eget tellus ac felis cursus ultricies. Suspendisse hendrerit leo non est. Nullam tortor. Aliquam erat volutpat. Donec quam. Pellentesque nec leo in odio volutpat rhoncus. In hac habitasse platea dictumst. Nullam pulvinar aliquet magna. Etiam odio. Sed eros. Etiam ultricies, nunc a mollis dictum, purus nisl gravida turpis, et bibendum diam felis non tellus. Morbi justo wisi, ullamcorper pellentesque, feugiat nec, mattis ut, justo.
Quisque laoreet est ut mi. Vivamus pharetra. Etiam enim est, ornare placerat, ultrices a, vestibulum quis, magna. Nam nec sem ut nunc convallis scelerisque. Aenean interdum augue quis mauris. Integer ipsum velit, venenatis non, varius vitae, nonummy id, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed tellus eget libero ultrices auctor. Donec nec arcu ut quam consequat porta. Donec nec massa. Aliquam eu ligula at risus eleifend bibendum. Duis fringilla mi imperdiet justo. Praesent hendrerit mi et orci. Donec cursus ipsum eu magna. Sed mi tortor, venenatis eu, semper eu, lobortis at, turpis. Suspendisse potenti.
Donec eget nunc. Etiam aliquam, nulla in placerat suscipit, arcu nibh varius quam, vitae lobortis massa justo sed leo. Suspendisse pretium. Phasellus lorem purus, dapibus at, blandit a, luctus id, dui. Vestibulum sollicitudin orci sit amet velit. Etiam consequat tristique nunc. Suspendisse tempor quam vel pede. Curabitur wisi dolor, nonummy quis, condimentum id, elementum nec, ligula. Duis nonummy sodales dolor. Fusce tortor. Vivamus arcu. Suspendisse quis sem eu purus bibendum vehicula. In et libero. Vivamus vestibulum bibendum ante. Cras volutpat. Fusce convallis fringilla elit. Proin sem. Sed felis. Sed felis tortor, iaculis quis, placerat sed, gravida sed, sem.