奇怪的网页内容运动

Question

所以我是HTML，CSS和整个Web开发场景的新手，所以我决定通过改变现有页面来学习。下面是一个模板，我已根据我的需要改变了我的CMS。问题是，内容是时不时地移动到最不受欢迎的位置。

我认为我的CSS出现问题导致了这个问题。

在检查footer和site_content div之后，我发现几乎没有差异。但我不知道为什么它总是不会出现这样：

CSS太大而无法放在这里，但整个来源可以在GitHub under OrangeCider找到。但是，我正在考虑（我认为）相关的代码片段：

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

更新：因此，如果我从overflow: hidden;中移除#site_content，内容会显示它应该如何显示，除非文本与侧边栏重叠页脚。这可能是溢出的事情吗？

Answer 1

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

试试这个css

Answer 2

嘿，您需要确保中间区块有块显示并清除：两者。

所以你应该更新你的CSS：

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

就是这样。玩得开心！

Answer 3

看起来你可能在这里有一些冲突的CSS规则。您可以尝试的一件事是!important关键字。

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

另外，为了确保float: left不会干扰您的样式，请将clear: both放在#site_content上。

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