CSS定义的边框不会显示在网页上

Question

在this page上我有一个div个在另一个之下。菜单栏包含以下CSS：

    #menu-bar {
        border-left:3px white solid;
        border-right:3px white solid;
    }

这很好用。下一个div，“内容”已定义相同的边框，但它们未显示。我能想到的唯一主要区别是“content” div为列提供了2个浮动div，但我认为这不重要。

为什么边界不显示的任何想法？
其他建设性的批评也是受欢迎的。

（出于测试目的，CSS包含在HTML文件中。）

更新
mkk 的overflow似乎是解决方案，但底部有一个小问题：在the updated page中，边框不会一直向下到页脚div ，尽管为“content” div设置了margin-bottom，为“页脚” div设置了margin-top为0.我可以通过将页脚的上边距设置为负值，但这似乎不是正确的方法...

Answer 1

div#content没有高度，因此没有边框。将其添加到CSS中，使其与内部div一样高：

#content:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
}

Answer 2

它很重要！如果#div中只有浮动元素，则不会定义高度和宽度。您需要将overflow: hidden属性添加到#div [在您的情况下为#content]，以使其按预期工作。

你可以通过使用例如firebug或chrome开发工具来看到这是正确的。悬停内容并看到它没有突出显示，然后添加overflow：hidden并观察这解决了问题。