Centering a DIV

[johnmr]

I am building an interface where I have a DIV that gets made visible when you roll over a certain area. The div contains some nav elements, which are jscript rollovers themselves. I've got the code working to hide and show the DIV and to do the rollovers (I've only done the one in the upper left). Here is what it looks like so far:

http://www.artntech.com/sample/index.html

The problem is, I really want the design to be centered, and since I am using absolute positioning for the DIV, this creates a problem. Here is what it looks like when I center the underlying table:

http://www.artntech.com/sample/index2.html

I'm pretty new to all his, and am stumped as to how to get that DIV element to center and align with the underlying table (since it is centered, I can't really predict exactly where it will be in the window).

I've seen articles saying this kind of thing can be one with CSS and have tried several of the samples I've seen with no luck. Anyone know of a good way to do this? Any help greatly appreciated.

Thanks

Johnmr

*

[HogDog]

1st add this to your body elemant in your style sheet:
body {text-align: center;}

2nd surround everything inside the body tag with <div class="global"> tag
then add the following to your CSS. that should do the trick.

div.global {
position: relative;
margin-left: auto;
margin-right: auto;
width: "what ever the width of the content is" px;
}

[spinal007]

just add this to your div's css:
margin:0 auto;

[johnmr]

thanks very much - I'll try this out and let you know what happens

[moojoo]

I don't see the need for absolute positioning on this but eh. What do I know. Since all 4 areas are contained within a containing div wouldn't relative positioning work? I may be wrong.

[spinal007]

it's soooooooooo simple:
margin:0 auto;

Code: Select all

<style>
#Container{
 width: 780px;
 margin:0 auto;
}
#Row1{ font-size:200%; padding:50px 0px; color:white; background:green; }
#Row2{ font-size:200%; padding:50px 0px; color:white; background:red; }
#Row3{ font-size:200%; padding:50px 0px; color:white; background:blue; }
</style>

<div id="Container">
 <div id="Row1">
  This is row 1
 </div>
 <div id="Row2">
  This is row 2
 </div>
 <div id="Row3">
  This is row 3
 </div>
</div>

[moojoo]

Even text-align: center; on the body would work. But I think there are issues preventing that, I need to look and see how he actually centered it.

[spinal007]

the problem with text-align:center is that you have to set text-align:left/right for all underlying elements...
also, text-align:center is for positioning/aligning text, not elements.

PS.: Moojoo: what's a noob?

[moojoo]

Actually you only have to set text-align:left on the container div. Everything in there will follow suit. You need to do that for IE 5.x anyway since IE 5 doesn't know margin: auto;

[spinal007]

Good point...
I'll just hope IE 5 is abolished soon enough... lol

[moojoo]

Wishful thinking heh. It will be a long time before everyone gets on Vista, and XP. although I hear IE 7 will be a pushed update to XP so.. lets hope. Too many people still on Win 98/Me/2k.. XP has been around for 6 years now? And I would guess that only 60 - 70% have upgraded to XP. And that may be a generous set of numbers.

[Ryan Fait]

Here's to hoping Vista is as good as Tiger. Not that I'll ever switch back to Windows...

[moojoo]

Vista will be close, half of its appearance and functions are a straight up rip of OS X. Right down to the rounded input fields. And their window management is a direct rip of Looking Glass by SUN. Muhahaha. No worries though, Vista may be as good as Tiger or close but leopard will be released first and no way will Vista even compare to Leopard. I however will happily purchase Vista and run it on my Macbook Pro.