Странная проблема CSS - почему это не выглядит правильно в Google Chrome?

Question

Данная страница находится здесь: http://www.allweatherwood.com/test-page/

Если вы посмотрите на него в Internet Explorer или Firefox, вы увидите, что он выглядит идеально. Но в Chrome, по какой-то причине, это совершенно другое животное. Что происходит в мире? Похоже, что область навигации слегка сужается, и это вызывает странную проблему с перемещением основной области содержимого в правую часть страницы? И почему показывается только маленький кусочек этой области? Я положительно озадачен. Попробовал посмотреть на код, и я просто не могу понять, где проблема.

CSS можно найти здесь: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css

Любая помощь в этом очень ценится!

Answer 1

Если вы установите width: 960px; или даже width: inherit на ваш content-wrapper div, все будет хорошо.По какой-то причине webkit не вычисляет ширину этого div, как ожидается, когда переполнение скрыто.

Возможно, кто-то точно знает, почему?

Answer 2

Все элементы в главном меню float:left, и поэтому содержимое попало на эти элементы. Вставить

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

после заголовка, чтобы остановить дальнейшее плавание элементов.

Кстати, если вы объявите свой HTML как XHTML 1.0, пожалуйста, подайте valid XHTML 1.0.