Strange Webpage Content Movement - css

Question

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?

Answer 1

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

Answer 2

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

Answer 3

Hey, you need to be sure the center block has block display and clear: both.
So you should update your CSS due to this one:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
That's it. Have fun!