margin: 17px auto; not working?

[wsg14]

http://img83.imageshack.us/img83/1279/nonalignif9.png


That is everything in the header div. The header's CSS:

.header {
width: 800px;
margin: 17px auto;
}

As you can see in the image, the logo and links aren't centered. I've been having problems with this for a while now. Does anybody know why it isn't properly centered? (there's more space on the right than the left)

[Iszak]

It is because the header is what is being positions into the center and not the children of it.

So say your example code is like.

<div id="header">
  <div id="logo"></div>
  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
  </ul>
</div>

If you were to set #header with the following properties

#header
{
  width: 800px;
  margin: 17px auto;
}

This would not cause the menu or the logo to align in the center, but more the containing div #header. If this is what you mean?

[wsg14]

The CSS you posted is the exact same as mine?

[Blinger1]

The CSS you posted is the exact same as mine?

Yes. What he is saying is that the actual div itsself is being moved, not the contents in the inside

[wsg14]

How do I center it then?

[Fugato]

.header {
margin: 0 auto;
width: 800px;
}

[Source]

The problem is not with the header div class, more the rest of it. Post the whole lot of CSS and html.

[wsg14]

HTML:

<div class="header">

<div class="logo"></div>

<div class="navigation">
<div class="link">home</div>
<div class="link">home</div>
<div class="link">home</div>
</div>

</div>

CSS:

.header {
width: 800px;
margin: 17px auto;
}

.header .logo {
background-image: url(http://www.x/images/misc/logo.png);
width: 166px;
height: 63px;
float: left;
}

.header .navigation {
width: 400px;
height: 42px;
font-size: 12px;
color: #ffffff;
float: right;
margin-top: 17px;
}

.header .navigation .link {
background-image: url(http://www.x/images/misc/nav_link.png);
width: 67px;
height: 35px;
float: left;
margin-left: 10px;
text-align: center;
padding-top: 7px;
}

[Source]

Float the links right, or make the width of the naviagation the exact correct width.

[wsg14]

Thanks Matt.