Как я могу остановить пересечение моих div'ов "headerSticky" и "content"?

Question

Я делаю страницу, которая имеет три основных компонента: заголовочный div "headerSticky", левый навигационный div "sidenav" и Div "content".

Боковая навигация фиксирована и не двигается; но div контента должен прокручиваться сам по себе. Однако верхняя часть содержимого div всегда перекрывается заголовком div.

Вот CSS для заголовка:

#headerSticky{
position:fixed;
padding:6px;
width: 100%;}

и содержание div:

#content {
padding-top: 100px;
float:right;
overflow: auto;
height: 90%; 
width: 840px;
padding: 0 20px 20px;}

Любая помощь будет оценена. Спасибо!

Редактировать: снимок экрана страницы. В верхней части таблицы должен быть заголовок (со значениями «Состояние» и «Состояние условия») с надписью «Проблемы», но он скрыт под заголовком:

альтернативный текст http://img14.imageshack.us/img14/477/screenshot20100510at611.png

Answer 1

Свойство float:top; не существует. Смотрите здесь: w3c Свойство с плавающей точкой .

Положение фиксировано означает, что этот элемент всегда будет иметь одинаковую позицию, при прокрутке экрана он будет «прилипать» к месту, в котором он был расположен на экране, поэтому, когда ваш контент длиннее экрана, заголовок перекрыть его, удалить это, добавить высоту.

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

Если бы вы также могли опубликовать свою HTML-разметку и CSS для вашего другого элемента, мы, вероятно, могли бы помочь вам больше:)

Надеюсь, что это поможет.

Answer 2

Я немного изменил CSS, и эта проблема была решена - вот код, который я использовал для заголовка:

#headerSticky { 
     height: 28px; 
    position: absolute; 
    top: 0; 
     width: 100%;
}

и содержание div:

#content {
    height: 100%;
    float:right;
    overflow-y: auto;
    overflow-x: auto;
}

Я знаю, что это ничем не отличается от того, что у меня было изначально, но я начал с нуля с CSS, и проблема определенно исчезла.

Спасибо всем, кто нашел время, чтобы ответить! Я очень ценю это.

Answer 3

Вы можете попробовать удалить позицию из вашего #headerSticky. Если вы позиционируете что-то абсолютное или фиксированное, любые последующие элементы будут действовать так, как если бы их не было (в этом случае создавалось перекрытие). Кроме того, я не уверен, но я думаю, что некоторые из ваших стилей могут быть недействительными.

Я надеюсь, что это поможет в некотором роде.