css margin:auto not centering div in webkit browse

I have been unable to determine the cause of this problem, so I can not display a test case, instead I have narrowed down my code to a page that still contains the fault without too much extra.
Here is the link:
http://www.richard-walsh.limewebs.com/Disk-Edits/index.html

The problem is that the content div (id=content), is not centering in Chrome and Safari.
It is positioned to the right.

The content div is surrounded by a div called bottom, whose width:100%; and height:auto;.

#bottom{
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

#content{
    width:862.4px;
    height:402px;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#030303;
    background-image:url(images/main.png);
    -moz-border-radius:15px;
    border-radius:15px;
    border-style:solid;
    border-color:#181818;
    border-width:4px;
    margin-top:60px;
    -moz-box-shadow: 1px 1px 20px 4px black;
    -webkit-box-shadow: 1px 1px 20px 4px black;
    box-shadow: 1px 1px 20px 4px black;
    overflow:hidden;
}

I have found that if I remove overflow:hidden from the content css then it centers correctly. But I need this (for parts not shown in the link)

I have also found that it works if I remove the menu entirely. So I think that there must be something in the menu css that has caused this. It works fine in Firefox(4).

I'm running Chrome 11.0.696.68 and Safari 5.0.5

Oh! I have just noticed that this only happens when Chrome is maximised, when it is in 'window mode' (for lack of a better name) it centers perfectly, even if the window is stretched to the full size of the screen.

I have also noticed that if you remove #copyright, then #content is rendered on the left, and if both #copyright and #choice is removed then the content div renders in the centre, and if you only remove #choice it still renders on the right.

If you remove #menu_all then it centers correctly.

Any help would be much appreciated,
Thanks

回答1:

Add display: block, see if that works.

回答2:

The solution:
The div above the content div (#copyright) did not have a height value declared. Declaring a height value (of 35px) fixed the problem I was having in chrome/safari.

height:auto; did not work.

This does not explain why when the content div was placed directly below the copyright div it worked. But still. It was a workable solution. So if you're have a similar problem then check that the div above has a height declared.

回答3: