To center my <div>, I am currently using something like
<div id="navcontainer" align="center">
This centers fine, but is deprecated code. I have seen these two solutions
recommended.

1)

body {
text-align: center;
min-width: 500px;
}
#wrapper {
position: relative;
text-align: left;
width: 500px;
margin-left: auto;
margin-right: auto;
}

This will undoubtedly work, but unfortunately centers text in the entire
page. And you can't use "text-align: center" in a <div>


2)
Centering a block with a width of 60% and a height of 30%:

..centerblock {
position: absolute;
width: 60%;
height: 30%;
left: 20%;
top: 35%;
}

I tried this one but it does not work for me. It does not center the <div>,
so I am stuck with deprecated coded, unless someone has a solution.

Thanks, CMA

CMAR wrote:
[color=blue]
>
> To center my <div>, I am currently using something like
> <div id="navcontainer" align="center">
> This centers fine, but is deprecated code.[/color]

http://dorward.me.uk/www/centre/#block (noting the bugs it describes in IE,
and the various work arounds)

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

"CMAR" <cma6j@yahoo.com> wrote:
[color=blue]
>To center my <div>, I am currently using something like
> <div id="navcontainer" align="center">
>This centers fine, but is deprecated code. I have seen these two solutions
>recommended.
>
>1)
>
>body {
> text-align: center;[/color]

Only needed by IE5- (and IE6 if you trigger quirks mode)
[color=blue]
> min-width: 500px;[/color]

Not needed.
[color=blue]
>}[/color]
[color=blue]
>#wrapper {
> position: relative;[/color]

Not needed.
[color=blue]
> text-align: left;[/color]

If you have this, then you shouldn't have the problem described below.
[color=blue]
> width: 500px;
> margin-left: auto;
> margin-right: auto;[/color]

This is the correct way of centering a block element and works in
modern browsers.
[color=blue]
>}
>
>This will undoubtedly work, but unfortunately centers text in the entire
>page.[/color]

So set text-align:left; on the child elements, just like you did
above.
[color=blue]
>And you can't use "text-align: center" in a <div>[/color]

Yes you can. It centers the content of the div, exactly as it's
supposed to.
[color=blue]
>2)
>Centering a block with a width of 60% and a height of 30%:
>
>.centerblock {
> position: absolute;
> width: 60%;
> height: 30%;
> left: 20%;
> top: 35%;
>}
>
>I tried this one but it does not work for me. It does not center the <div>,
>so I am stuck with deprecated coded, unless someone has a solution.[/color]

That will center it horizontally. (But width: 60%; margin-left: 20%;
margin-right: 20%; is simpler.)

Vertically it might work depending on the height of the parent
element.

The two bits of code you've given are very different, what are you
actually trying to do?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

"David Dorward" <dorward@yahoo.com> wrote in message
news:c8j2cv$l05$1$8300dec7@news.demon.co.uk...[color=blue]
> CMAR wrote:
>[color=green]
> >
> > To center my <div>, I am currently using something like
> > <div id="navcontainer" align="center">
> > This centers fine, but is deprecated code.[/color]
>
> http://dorward.me.uk/www/centre/#block (noting the bugs it describes in[/color]
IE,[color=blue]
> and the various work arounds)
>
> --
> David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>[/color]

Thanks to David and Steve for the very useful posts.
David, I was able to use your code with some modification and tweaking to
get the centering I want. It looks good in IE6. I assume that it will also
be centered in IE5 and IE5.5, since that was the whole purpose of the
exercise.

<div style="text-align:center;">
<div id="navcontainer">
<ul id="navlist">
<li><a href="mailto:xyz@efg.com" title="Send email">Email</a></li>
<li><a href="order.htm" title="orders">To Order</a></li>
<li><a href="index.html" title="Homepage">Home</a></li>
</ul>
</div>
</div>

The relevant style is
#navcontainer {background-color: #FF8040; margin-left: auto; margin-right:
auto;
padding-top: .45em; width: 100%;}