*
The moose likes HTML, CSS and JavaScript and the fly likes center a div inside a div Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "center a div inside a div" Watch "center a div inside a div" New topic
Author

center a div inside a div

Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
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.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61092
    
  66

Without code, it's hard to guess. The auto margin trick usually works for me.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
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?
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Originally posted by Bryce Martin:
Do you think I should specify a DTD?


Sure. And while your at it throw in some arbitrary tags like <font /> and <embed />. I mean, as long as we're just guessing since we don't have example code to debug.


GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61092
    
  66

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.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
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.

So heres what you asked for...



JSP





CSS

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: center a div inside a div