Почему моя боковая панель перемещается вниз к нижней части страницы, а не остается сбоку?

#html #css #drupal #views

#HTML #css #drupal #Вид

Вопрос:

У меня есть веб-сайт с блогом и боковой панелью с правой стороны, и это выглядит нормально, однако, когда я перехожу на страницу 2 блога, боковая панель перемещается вниз к нижней части страницы.

Вы можете понять, что я имею в виду, перейдя по этим ссылкам

http://www.beatinganger.com/blog (Боковая панель выглядит нормально)

http://www.beatinganger.com/blog?page=1 (Боковая панель перемещается вниз)

Я просмотрел исходный код и не вижу никаких изменений в разнице между двумя страницами.

Буду признателен за любую помощь.

Комментарии:

1. Разница в том, что правый контейнер div помещается внутри левого контейнера div страницы 1. пожалуйста, проверьте код.

Ответ №1:

Ваш элемент #left_container на вложенной странице не закрывается, и поэтому элемент #right_container содержится внутри него.

Комментарии:

1. Спасибо — теперь, чтобы попытаться выяснить, как это исправить 😉

Ответ №2:

Закрытие контейнера div вызывает проблему (как указывают другие ответы); также ваш div с классом vertical_menu выходит за рамки отведенного размера, что, вероятно, вызовет проблемы с плавающей точкой при закрытии ваших divs:

введите описание изображения здесь

Комментарии:

1. Спасибо, Амелвин, попробую разобраться — не уверен, почему это происходит, хотя CSS тот же, единственное отличие в том, что он использует представления Drupal.

2. раздел vertical_menu имеет ширину 300 пикселей — некоторые элементы внутри переполнены — изображение, которое я извлек выше, использовалось в Google Chrome, что позволит вам изменять размер элементов без необходимости перестраивать страницу. Firebug в Firefox делает то же самое.

Ответ №3:

Да, что-то не так с шаблоном второго URL, так что боковая панель вводится ВНУТРИ левой «главной» колонки.

Ответ №4:

#right_containerhttp://www.beatinganger.com/blog?page=1 находится в другой иерархии, чем описание ссылки enter здесь. #right_container и #left_container должны быть на том же родительском уровне, что и показано в первой ссылке.

Еще один совет, хотя я замечаю, что содержимое #right_container имеет немного «более широкое» содержимое, чем сам контейнер. Убедитесь, что элементы содержимого меньше или равны ширине родительского контейнера, или установите #right_container -> overflow: hidden; хотя это быстрый хакерский способ.