table inside div block - no joy

[axlq]

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

[Jim Moe]

axlq wrote:

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:
[...]
This layout gives me inconsistent behavior in various browsers:

IE incorrectly expands a div with a fixed width to fit its content.
To get what you want:
1. Remove #leftpanel { width:10em }
2. Remove <table width="100%">
3. Remove <hr width="80%">. Use a border property to put a line there,
say, for the <p> element that should contain "Admin Login."

Other notes:
- "<div class="invert"><b>Member Login</b></div>" is a heading. So use a
heading element (probably <h2>). Same for "Tour our website," "Resources,"
"Search Content," "View Content," etc.
- Body text is set to 83.33%, 16.66% smaller than I prefer.
- You use <br> where <p> is more semantically correct.
- Use ems to set the width of the <input> element. The width is much more
consistent across browsers that way. A gotcha is that the rule should be
applied as specifically as possible otherwise it applies to radio buttons,
check boxes, etc., as well.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jim Moe]

Jim Moe wrote:

1. Remove #leftpanel { width:10em }
2. Remove <table width="100%">
3. Remove <hr width="80%">.

Crud. I was not clear.
1. remove the rule "width:10em"
2. remove the property width="100%"
3. remove the element <hr> completely.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[axlq]

In article <9t********************@giganews.com>,
Jim Moe <jm***************@sohnen-moe.com> wrote:

Jim Moe wrote:

1. Remove #leftpanel { width:10em }
2. Remove <table width="100%">
3. Remove <hr width="80%">.

That resulted in very odd behavior in IE, but normal behavior in Firefox
and Opera. The <hr width="80%"> expanded to 80% of the viewport in IE.
In the other browsers it expanded to 80% of whatever size the div block
needed to be to fit the text.
Crud. I was not clear.
1. remove the rule "width:10em"
2. remove the property width="100%"
3. remove the element <hr> completely.

THAT worked quite well! Thanks.

-A