Strange Webpage Content Movement

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!