Is there anyway I can get it to "do what I mean"???
I want a blue bar from left to right edge, then a grey bar that is center indented... basically, just bring it in on both edges a bit... What's happening is that the grey bar is taking up 100% of the screen width, not its container's width (its container being a div with a margin). So I get the horizontal scroll bar, and besides the scroll bar, it looks like I only have a left margin.
I am trying to use as much CSS as possible. I'm trying to avoid using the center tag.
You found one of the flaws with this. The table will table on the width of the page and will ignore the fact there is a margin, try using a smaller percentage. If you want in indent on the left then you can align the table to the right and give a percentage that way. Sucks.... Eric
This is as close as I can get to what I want... The problem is the <center> tag.. it's deprecated, but there is no direct replacement that 'works' for doing tables. As Eric mentions, it's also a bit buggish that table widths are not relative to their containers when dealing with CSS.
As an example of how it *should*(?) work, a table width set to 600 px can contain another table that has a width of 100%. This interior table will not 'blow up' the page. It is limited by its container. I would have expected CSS and tables to get along better.
The problem with my 'best solution' is that the amount of whitespace on left and right is resizing along with the table. I wanted an absolute margin of 10px. Oh well. IT's also slightly buggy with IE6 on XP. When you drag the browser window wider and narrower, a horizontal scroll bar flickers on and off. As it happens the scrollbar is always pretty much 'unmoveable' as it is the width of the window. If you stop dragging with the scrollbar visible, you get a useless scrollbar. sheesh.
Mani: Removing the % from the second table results in a grey bar that is as long as the word FOO. I could make the div itself have the background color, but then what happens when my table contains enough data to cause a horizontal scrollbar? (I don't want that). So I am trying to limit the table to 100% of it's allowed width, as specified by the containing div. But the browser isn't honouring this container's margins (or rather, it is.. but not in the way I want it to.)