Strange Webpage Content Movement

So I'm new to HTML, CSS, and the whole web development scene so I decided to learn by altering existing pages. The bellow is a template that I have altered to my needs to allow for my CMS. The problem is, is that the content moves every now and then to the most unliked position.

I believe that there is something wrong with my CSS that is causing this problem.

Upon inspection of the footer and site_content divs, I have found pretty much no differences. But I don't know why it doesn't ALWAYS show up like this:

The CSS is too large to put on here but the whole source can be found on GitHub under OrangeCider. However I am putting in the (what I think is) relevant pieces of code:

#main, #logo, #menubar, #site_content, #footer {
  margin-left: auto; 
  margin-right: auto;
}
#site_content {
  width: 837px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 20px 24px 20px 37px;
  background: #FFF url(content.png) repeat-y;
}

UPDATE: So it seems that if I remove the overflow: hidden; from the #site_content, the content shows how it should, except there is text overlapping with the sidebar ontop of the footer. Could it be things with the overflow?

It looks like you may have some conflicting CSS rules here. One thing you can try is the !important keyword.

#main, #logo, #menubar, #site_content, #footer {
  margin: 0 auto !important;
}

Also, just to make sure that float: left isn't interfering with your styles, put clear: both on the #site_content.

#site_content {
  width: 837px;
  display: block;
  overflow: hidden;
  clear: both;
  padding: 20px 24px 20px 37px;
  background: #fff url(content.png) repeat-y;
}