CSS - <div> Centering, I can't get my <div> to be centered Options

[backyarder]

Hello,

I am new to web building. My intention is to use php but am working on the home page first. I will then break it into the PHP files needed. That being said everything is in one file home. html right now. The problem that I am having is that my <div="header"> </div> and other <div>'s are not centering. I am using the CSS: #header { margin: 0 auto; } and I think that should center it.

I am attaching my file for reference.

Thank you,
backyarder

[joyful]

Hey,

When I downloaded your file, the div centered fine. I am viewing in safari on mac... How are you viewing it?

There are multiple ways to center a div... (some work with some browsers and others don't etc.)...
You could try this:

CODE

margin-left: auto;
margin-right: auto;

Hope this helps!

--

[Frederiek]

See
- http://css-discuss.incutio.com/wiki/Centering_Block_Element
- http://www.maxdesign.com.au/articles/center/

[Darin McGrew]

You have no doctype declaration, which puts browsers in quirks mode:
http://hsivonen.iki.fi/doctype/

MSIE doesn't support CSS centering when in quirks mode.

[backyarder]

I am using IE 8.

Darin, thank you, i am not sure I fully understand all the different options.

I have added what I thought should fix it but have I don't see any difference.

right now I don't have anything by IE 8 to view with.

thanks for the help.

This post has been edited by backyarder: May 30 2011, 12:38 PM

[Darin McGrew]

right now I don't have anything by IE 8 to view with.

A lot of people find it easier to design for standards-oriented browsers, and then add fixes for MSIE only when necessary. Designing for MSIE and then trying to get it to work on standards-oriented browsers is often harder.

They're free to download:
http://www.mozilla.com/firefox/fx/
http://www.google.com/chrome/
http://www.apple.com/safari/download/
http://www.opera.com/download/

[Darin McGrew]

When I view the page in my browsers, it is centered.

[pandy]

In IE7 too. Hasn't anyone noticed I've upgraded BTW?

Darin, thank you, i am not sure I fully understand all the different options.

The doctype switching you mean? Yes, it's a mess. Choose a doctype that corresponds to the flavour of HTML you want to write. HTML or XHTML, Strict or Transitional. Then you see to it that it's formatted in a way that gives you Standards or Almost Standards Mode according to the table Darin linked to. That basically means the long version with a URL for the HTML doctypes.

Not that anyone is asking me, but in case you wonder what I think, I recommend HTML 4.01 Strict. But if you need Transitional, that's fine too, but you would learn clean HTML faster if you stick to Strict. Not much point in the X for most situations and if you after all need it you know you do. If you aren't sure, you don't need it.

[backyarder]

I would like to thank everyone that has replyed to this thread.

The newbe on this end has made an error. I think i need to repost. What I am trying to center is the titles for the links in the navigation div. I can clearly see that the div's are centered. I am sorry for the confunsion.

I have link1 link2 and link3 that I would like to center in <div id="navigation">

if I should start another thread please let me know. If not please help.

Thanks again.

[Frederiek]

Then have a look here: http://css.maxdesign.com.au/listamatic/horizontal16.htm .

[pandy]

You've made the LIs inline so you can center them as you would any other inline content, by using 'text-align: center' with the parent element.

CODE

#navigation ul  { text-align: center }

You need to correct the errors though. If you place anything after the parse error caused by the prim sign, it most likely won't be read.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all