Strange CSS issue- Why doesn't this look right in Google Chrome?

The page in question is here: http://www.allweatherwood.com/test-page/

If you look at it in Internet Explorer or Firefox, you should find that it looks perfectly fine. But in C开发者_如何学Pythonhrome, for some reason, it is a completely different animal. What in the world is going on? It looks like the navigation area is getting bumped down slightly, and that is causing the strange issue with the main content area being moved to the right side of the page? And why is only a small sliver of that area being shown? I am positively stumped. Have tried looking at the code and I just can't figure out where the issue is.

CSS can be found here: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css

Any help on this is MUCH appreciated!

If you set width: 960px; or even width: inherit to your content-wrapper div it looks alright. For whatever reason, webkit isn't calculating the width of that div they way it's expected when it's overflow is set to hidden.

Perhaps someone knows exactly why?

The elements in the main menu are all float:left, and so the content floated on to these elements. Insert

<div style="clear: both"></div>

after the header to stop further elements from floating.

By the way, if you declare your HTML as XHTML 1.0, please serve valid XHTML 1.0.