I'm trying to center a div inside a div. I have a containing div. Inside that div I have another div that has a table inside of it. The div and the table are fixed widths. The containing div is width 100% and is inside of a div that wraps the whole page. I'm having trouble getting my table div to center inside the containing div. Strangely enough I can get it to work inside of IE6 but not FF2.
I've tried the text-align: center. Which works for IE6. I tried the margin-right: auto; margin-left:auto; for FF2 but that doesn't work. It should. But it doesn't. I'm at a loss. Anybody have any ideas? I'm thinking of just using jqGrid and forgetting this whole stupid thing. But I won't know if that works until I do it...E I E I O.
I'm working on a jqGrid right now. If I'm still having problems after this I'll report back...
I thought for sure that the margin align would work too...heck I was on a page that used it for an example, and since I was using firefox it was supposed to work, and it did. But my own code wouldn't do it. Do you think I should specify a DTD?
To Gregg's point, yeah, it's hard to help you debug this without any code.
With regard to adding a DOCTYPE, you might want to look up the concept of quirks mode on quirksmode.org. That often accounts for differences between IE and real browsers.
Unless I have a good reason otherwise, I try to keep all my pages in standards mode. This tends to make for more deterministic behavior.
Joined: Nov 19, 2007
Ok. I'll post the code for the page and then I'll post the external style sheet after that. Here are the issues that I'm seeing. In IE the tables will center if I use that nice little text-align: center; for the div. But I can't get the table header to stop from scrolling with the body. In FF2 the table works great and the header doesn't move, however, I can't get the div that contains the table to center. It should with the margin-left: auto; and margin-right: auto; but its not working. I'm at a loss.