将文本定位在宽度内：100％（液体？）页眉和页脚元素

Question

一些背景：我构建的几乎每个网站都基于使用中心容器div，您在屏幕上看到的所有内容都包含在一个1000px宽的容器中。左侧或右侧没有任何东西，也没有顶部或底部条延伸到屏幕的左侧或右侧。现在是时候构建一个顶部和底部条形的网站，它扩展到1000px容器div之外。得到那个部分，直到酒吧本身。

问题：我想在顶部和底部栏中定位文本（确切地说是链接），与SO在这里看起来没有什么不同。这是我搞砸的地方，因为我想在没有绝对定位，JS或jQ或插件的情况下这样做。当我添加一个div来包含顶部栏中的文本时，它会高兴地位于顶栏的左侧，而不是我想要的位置。我已经进行了搜索，研究并尝试了解这一点，但无济于事。

因此：我建立了一个包含图像的示例网站，如果我希望看到的东西。该网站至少在HTML和CSS上（希望）能够清楚地表明，并且可以找到HERE。

Answer 1

将此添加到您的css：

#top_content {
  margin: 0 auto;
  width: 1000px;
}

这会使<div id="top_content">here</div>中的任何文字与您的主1000px容器对齐，而<div id="topbar">仍会扩展到浏览器宽度的100％。

对你的页脚做同样的事情，给它一个内部div并用CSS定位它给它自动左/右边距和1000px宽度，使它居中在主#content容器下。