Html 嵌套Div问题

在我的页面中，我有三个部分：页眉、正文和页脚。 在身体上我有三个div。第一个div包括另外两个小div

我写了这个CSS代码：

#body_container{
    margin: 10px 160px;
    height: auto;
    width: 100%;
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    height: auto;
    width: 74%;
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    height: auto;
    width: 25%;
    float: right;
    border: 1px solid #F0F;
}

但是当我检查它时，div已经超出了我的范围。我给出了160px左右边距。我该怎么办？ 谢谢

---

我讨厌使用百分比，因为它们依赖于其他东西

我通常使用静态值执行某些操作，例如：

#body_container{
    margin: 10px auto; /** The auto will make this div centered to the page **/
    width: 1000px; /** suppose you want this width **/
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    width: 748px; /** The width of the main part, -2px (for the border) **/
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    width: 248px; /** The width of the side bar, -2px (for the border) **/
    border: 1px solid #F0F;
}

当然，如果你想改变你的主div的宽度和浏览器的大小（就像你原来的CSS一样），我的答案是行不通的

---

但我建议您不要根据浏览器更改宽度，因为它会根据窗口的不同而更改页面的组织。

这很简单，

边距

会添加到元素的最终渲染宽度（即160 x 2+父级宽度的100%，因此它是溢出的），因此您可能希望这样做，例如，对于外部div，宽度为79%，左右边距各为10%（因此总数为99%，减少1%，以留出一些边界空间等…尽管我通常不是这样做的）

例如：

还有一件事：要清除浮动，您不能像示例中那样清除它

或者使用一个额外的div，如下所示：

或者使用这种技术：

---

请参见：

1您应该提供最少的html代码，以便回答者能够重现您的问题谢谢您的指导，正如您预测的那样，我希望更改有关更改浏览器的任何内容。但是你的推荐很有帮助。再次感谢。