I tried your solution with width=98%.
Unfortunately this solution isn't good enough to entirely match a framed structure. Sometimes the content pane isn't stretched enough and sometimes you still get the unnecessery horisontal scrollbar if the window is smaller.
The design is of the highest importance to us since we have hundred of large customers using our CRM system. They simply won't accept a new design that not is as good as the old one.
The problem only partly depend on using 100% width. The real problem is how IE interprets documents in "quirks" and "strict" mode. In "quirks" mode it looks ok - no horizontal scrollbar appears. In strict mode the scrollbars appears. IE doesn't make extra space for the vertical scrollbar, it just put it on top, forcing the horizontal scrollbar to appear.
The only solution I can think about (without overflow-x:hidden) is to check if the scrollable div has a vertical scrollbar and if it does - decrease the inner content by the width of the scrollbar width (17px?). We also have to consider browser resizing, collapsing/expanding of other elements in the document to handle this properly.
Here's some pseudo code:
|var elm = $find('ContentPane').getContentElement();
|var elmelmInner = elm.firstChild;
|if (elm.offsetHeight < elm.scrollHeight) // we have scroll!
| elmInnerelmInner.style.width = elmInner.offsetWidth - 17 + 'px';
I would be happy to get your thoughts about this.