Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
The innermost table contains many cells in a single row longer than most
browser widths. To display it in the current page, I've used a container
div with overflow:scroll, and a width of 100%. When this table appears
within the divs alone, the overflow works correctly--the table is no
larger than the current browser (viewport) width, and scroll bars appear
[example 1]. When this table appears within a table used for page
layout, however, the width of the container div stretches to show the
entire table, past the viewport's boundaries, producing a horizontal
scroll bar in the browser [example 2]. (Recall that this is in IE6, not
Firefox; Firefox 1.5 doesn't render the two differently.)
How can I make example 2 display like example 1?
There must be something I can change in CSS that I'm missing. Changing
page structure is not an option; minor html changes are OK. I don't want
to use an inline frame or new browser window (i.e., I'm hoping for a
pure CSS fix here). I also want to keep the layout fluid.
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/