How do I make my content column work?

I've made a simple mockup of my website on jsFiddle. As you can see, the text in the content column is not mindful of the other elements and the footer is pushed up to just below the sidebar.

I understand that this is what is supposed to happen since the content column's position is set to absolute but I'm not sure how else to make the column go up behind the header like that.

How can I modify or restructure my site so that it can look less like the above and more like this:

开发者_运维技巧

Notice that the column goes up above the header a little ways.

Change your CSS to this:

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

This essentially makes the header and sidebar absolute, but keeps the content in the normal flow of the page, thus allowing it to push the footer down to the bottom of the page.