如何使我的内容列工作？

Question

我做了simple mockup of my website on jsFiddle。如您所见，内容列中的文本不会注意其他元素，并且页脚会被推到侧边栏的正下方。

我理解这是应该发生的事情，因为内容列的位置设置为绝对但我不知道如何让列在这样的标题后面上升。

如何修改或重构我的网站，使其看起来不像上面那样，更像是这样：

请注意，该列稍微超出了标题。

Answer 1

将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%;
}

这实际上使标题和侧边栏成为绝对，但是将内容保留在页面的正常流程中，从而允许它将页脚向下推到页面底部。