Блог

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

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

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

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

Измените свой 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%;
}
  

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