Tables and CSS

[Andrew Mutch]

I've run into one of those IE vs. the World problems with my CSS and I was
hoping one of the gurus out there might be able to suggest a workaround.

The basic problem is this:

The basic layout of our web pages consists of two DIVs arranged as columns.
The left-hand DIV is reserved for a navigation menu and takes up 15% of the
page width. The right-hand DIV is where the page content exists and it is set
to 80% of the page width. Both DIVs are wrapped in another DIV which is set to
a width of 100%. We also have some header and footer DIVs on the page but they
aren't part of the problem.

The problem occurs when we add a table which has content that causes the table
width to exceed the space allocated to the content DIV. In Mozilla-based
browsers, the table extends past the right edge of the screen and the browser
provides a horizontal scroll bar to allow you to see the content past the
right edge. So far, so good.

But with IE 6(SP1), the entire DIV of content is pushed below the DIV with the
navigation menu and the content shifts to the left edge of the screen. This is
not the preferred behavior! Instead, I would like the content to display as it
does in the Mozilla browser. I've played around with various table widths and
as long as the actual content exceeds the screen area available to display it,
this problem occurs in IE.

Here's a test page to look at:

http://waterford.lib.mi.us/adult/watehist/tabletest.htm

If anyone has any ideas on how this might be fixed for IE, I would love to
hear them!

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI