Problem With Tables Within DIVs

Tables stretching DIVs past the screen edge

[adam34]

I've been reading the site for a while, but finally got around to registering with it. You seem like a great bunch of designers/developers, so I figured this would be the best place to ask my question. I'm sorry if it has been addressed before, but after a search of the message board on a few different subjects, I could not find the answer I was looking for.

Something tells me the answer to my problem is an easy one, but every time I fiddle with it and get it right in one browser, it breaks in another.

I'm talking about 100% wide tables within a DIV tag.

The bulk of my page is enclosed in a DIV with a 1px border and 10px padding. Inside that goes most of the information. The only other information on the site is a header with our logo and a menu above the DIV tag. I have tables inside the DIV on most of my pages, but they exhibit odd behavior when browsing with Firefox.

I'm sad to say, when I originally designed the site, I did it around Internet Explorer 6. It's an intranet site used by 15 people and getting them to switch to Firefox (my preferred browser) isn't very easy, so I had to make it look good when they browsed it.

The code looks like this:

#body
{
 width: 100%;
 padding: 10px;
 border: 1px solid black;
}

<div id="body">
 <table width="100%">
 -- table data here --
 </table>
</div>

I know the DIV tag should not have its width specified, but when I disable the width field, IE stretches the table longer than the width of the window while Firefox handles it beautifully. Keeping the width field makes Firefox break in much the same way disabling it makes IE break.

If I take out the padding field, they both look fine (albeit with no space between the border on the DIV and the content within it). I'd like to keep the DIV in there to break up the page into sections, because a free-flowing layout (i.e., a layout without a bounding box) just doesn't look good with what I'm doing.

I've tried to take out the padding on the DIV and put it on the table, and once again, Firefox handles it fine, but IE completely ignores the padding and keeps the table's edges flush against the DIV's.

I'm sure there's something really simple I'm missing here. It's one of those things where I've tried a million different combinations of things but it's the one I haven't tried that's going to work out for me.

Sorry for the long-winded post; it's been bugging me for a while now.

[bhartzer]

Have you tried absolute positioning within the div tag? You have a lot more control over it if you do, and that may take care of your issue.

[adam34]

That seemed to fix things when I tested it at home. I'll try it at work tomorrow to see if it fixes things there. The only oddity I see now is that although IE responds to a

margin-bottom: 1em

, Firefox does not, so my header DIV is stuck to the body DIV. Putting

margin-top: 1em

on the body DIV seemed to give me the gap I wanted, but I wonder if there's a good reason why having a top margin on the bottom DIV works and a bottom margin on the top DIV does not.

Thanks for your help.

[adam34]

The problem I seem to be having now is that when I do not have a 100% wide table in my DIV tag, it doesn't expand to the fullest extent of the screen. Putting a width value inside the DIV tag brings me back to the original problem: IE renders the page how I want, but Firefox extends it past the edge of the window.

Also, with absolute positioning, the body DIV overlaps everything under it, and no amount of clearing seems to fix that.