CSS центрирование не работает с автоматическим переполнением поля и переполнением

Question

Я заметил, что если я просмотрю страницу с более широким разрешением, содержимое раздела выравнивается вправо, а не центрируется.

Я использую

margin: 0 auto; 
width: 998px; 
overflow: hidden; 

кажется, есть эта ошибка, по крайней мере, в Safari, Firefox и Chrome. Я попытался отключить overflow: hidden, и он избавился от ошибки, но испортил мои поплавки внутри контента.

Вы можете увидеть пример на странице живого здесь: http://autouncle.dk/da/brugte-biler/Kia или http://autouncle.dk/da/brugte-biler/Ford (вы должны увидеть его, по меньшей мере 1500px широкоэкранный, чтобы увидеть ошибку).

Любые идеи о том, что может вызвать эту ошибку и какие возможные решения?

Answer 1

О причине проблемы: это связанно с page-title элемента вашего заголовка:

#header-outer элемент содержит некоторые плавали элементы, но вы забыли поляну, поэтому смещение слева от основного раздела вашего сайта начинается где заканчивается page-title. (вы можете убедиться в этом, скрывая page-title элемент — при установке display: none страница правильно по центру)

Поэтому добавление

body#basic_page #header-outer { 
    overflow: hidden; 
} 

вы решить проблему

Как sidenote настоятельно избегает пустого div только для целей очистки: есть более чистые методы, которые не требуют дополнительных m arkup, как easyclearing

Answer 2

Удалить

overflow:hidden 

от div#content и поставить его содержимое в нем дополнительную <div> который имеет

width:100%; 
overflow:hidden; 

Это решает проблему для меня.

Answer 3

Ваше решение является удаление overflow: hidden

Чтобы зафиксировать поплавок ошибку на втором примере вы дали попробовать использовать 100% ширины:

body#basic_page.brands_controller #content .text_info { 
    overflow: hidden; 
    font-size: 12px; 
    width: 100%; /* new rule */ 
}