I created an experimental page at:
http://sunbeam.rahul.net/~unicorn/csstest.html
....which is a standard header + nav bar + 2-column content + footer
CSS layout.
The left column is 10em wide and contains two block elements:
1. The first block element contains a small table wider than 10em.
Yes, I know this particular example doesn't truly need a table.
Let's assume it does, that I actually have tabular data to display
there.
2. The second block element contains a list of links.
This layout gives me inconsistent behavior in various browsers:
IE:
Box 1 automatically adjusts its width to contain the table, but
the other elements contained inside that box don't get wider, they
inherit 10em and don't change. Box 2 remains at 10em. The text in
the right column wraps around the wider part of the left column.
Opera, Firefox:
These browsers keep the left column at 10em. However, the block
elements DON'T contain the table properly; instead, the table pokes
out the right side. The text in the right column is not wrapped
around the table intruding into it.
How would I get such a layout to display consistently across browser
platforms, without using fixed-pixel sizes everywhere?
(Before anyone asks why it's HTML 4.01 Transitional instead of
strict, it's because this is part of re-doing a table-heavy site
that uses numerous table attributes [such as nowrap] that are legal
in Transitional but not strict. Even the layout is table-based,
which I'm trying to change. In any case, I don't think it would
matter for the posted problem.)
-A