Как заставить работать мой столбец контента? - PullRequest
Новая
       1

Как заставить работать мой столбец контента?

1 голос
/ 09 апреля 2011

Я сделал простой макет моего сайта на jsFiddle . Как видите, текст в столбце содержимого не учитывает другие элементы, и нижний колонтитул перемещается чуть ниже боковой панели.

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

Как я могу изменить или реструктурировать свой сайт так, чтобы он выглядел не так, как описано выше, а скорее так:

Mockup

Обратите внимание, что столбец немного выше заголовка.

1 Ответ

1 голос
/ 09 апреля 2011

Измените свой CSS на это: 

#header {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  margin-top: 5px;
  width: 100%;
  left: 10px;
  top: 30px;
}
#logo {
   background-color: #909090;
   width: 150px;
   height: 50px;
   display: block;
   float: left;
}
#navbar {
  position: static;
  background-color: #606060;   
}
#content {
  background-color: #ffb600;
  width: 50%;
  z-index: 0;
  margin-left: 90px;
}
#sidebar {
  background-color: #ECEDEE;
  width: 80px;
  height: 100px;
  position: absolute;
    left: 10px;
    top: 90px;
}
#footer {
  background-color: #b6FF00;
  z-index: 1;
  width: 100%;
}

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

...