Как мне исправить эти поля?Работает нормально только в Firefox

Question

У меня проблемы с полями в браузерах (кроме Firefox) на этой странице:

http://jumpthru.net/newsite/commentary/

Вот код CSS:

#container3 {
    float: right;
    margin: 0 -240px;
    width: 100%;
}

#content3 {
    margin: 0 210px 0 -45px;
    width:500px;
}

#primary, #secondary {
    left:920px;
    overflow: hidden;
    padding-top: 40px;
    position:absolute;
    width: 220px;

}

Answer 1

Какой-то странный способ создать страницу .. Я рекомендую вам создать макет из 2 колонок в main2 .. Слева для меню и справа для заголовка комментария, под которым расположено содержимое и последние комментарии.

И начните использовать clearfix: http://www.positioniseverything.net/easyclearing.html

Answer 2

Я вижу, что вы используете абсолютную позицию на #primary, это основано на окне, поэтому, когда я изменяю размер окна, перемещается раздел "Последние комментарии". Таким образом, в зависимости от разрешения экрана пользователей и размера их браузера, они будут перемещаться.

добавить позицию относительно main2 div. Затем измените левое значение #primary на правое со значением 0. Это будет держать его справа и всегда в том же месте.

#main2 {
  position: relative;
  ...
}

#primary, #secondary {
    right: 0;
    ...
}

РЕДАКТИРОВАТЬ: причина, по которой это работает, когда вы используете position: absolute значение абсолютное ближайший относительный родительский элемент. если элемент не имеет родительских элементов с position :lative, он будет абсолютным для окна браузера. Надеюсь, что это имеет смысл.

Answer 3

Я исправил проблему в Chrome, изменив этот CSS:

#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}