<!DOCTYPE html> <html class="reftest-wait"> <head> <title>The Grid in an overflowing div</title> <style type="text/css"> html { padding: 0; border: 0; margin: 0; } body { padding: 0; border: 0; margin: 0; } table { padding: 0; margin: 0; border-top: none; border-left: none; border-right: 1px solid black; border-bottom: 1px solid black; } tr { padding: 0; border: 0; margin: 0; } td { /* top border counts as part of height, but left border doesn't count as part of width. go figure. */ min-height: 99px; height: 99px; max-height: 99px; min-width: 99px; width: 99px; max-width: 99px; padding: 0; border-left: 1px solid black; border-top: 1px solid black; border-right: none; border-bottom: none; margin: 0; font-size: 12px; text-align: left; vertical-align: top; font-family: monospace; } </style> <script type="text/javascript"> var val = 100; var max = 1000; function scrollmore() { if (val == max) { document.documentElement.removeAttribute('class'); return; } var div = document.getElementById('nest'); div.scrollLeft = val; div.scrollTop = val; val += 100; document.documentElement.offsetLeft; setTimeout(scrollmore, 500); } window.onload = scrollmore; </script> </head> <body> <div style="color: red">this text is above the scrolling div. the div below is 300x400</div> <div id="nest" style="overflow: scroll; height: 400px; width: 300px; border: solid 1px black"> <div style="background: blue; width: 5000px; height: 5000px;">text</div> </div> <div style="color: red">this text is below the scrolling div</div> </body> </html>