我的#content div的定位不起作用？

Question

每当我为我的网页输入HTML时; #content div位于小部件/侧边栏下方，我已尝试position:absolute - 这会导致我的图片无法重新调整大小。

#content {
    background: #fff;
    margin: 2px 0 2px;
    padding: 20px 62px;
    width: 68%;
    display: block;
    float: left;
    margin-left: 25%;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}

/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
    width: 25%;
    float: left;
    margin: 2px 0 2px;
}
.widget {
    background: #0b2d7e;
    margin: 0 0 0px;
    padding: 0px 20px;
    /* rounded corner */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}

Answer 1

我曾尝试过教你的相同课程。由于填充，你的东西不会加起来达到100％。你有68％+ 25％+ 25％+更多填充=超过100％。

如果一个盒子的宽度为50％，左右两边的填充为10px，边框为1px，那么你有50％+ 20px + 2px。

如果您有两个与上述完全相同的div，则表示100％+ 40px + 40px + 2px + 2px =超过100％。

使用box-sizing: border-box;解决上面的填充和边框问题。然后你只需要考虑边距。

请参阅Can I Use It进行大小调整。

这是一个修复你的代码的JS小提琴......你也有一个不需要的迷路</aside>。

http://jsfiddle.net/a2YSa/1/

请注意，在我提供的代码中，box-sizing: border-box;告诉div计算其宽度，包括填充和边框。然后我有25％大小的左列，50％右侧内容列，25％边距= 100％。

这是一个小提琴，25％的侧边栏和75％的主边，0边距。

http://jsfiddle.net/a2YSa/3/

我最后一个小提琴的截图：

Answer 2

您是否尝试使用firebug来查看问题？我认为你应该删除#content ...

上25％的左边距

Answer 3

我认为问题在于：

content width: 68%
content margin-left: 25%
sidebar width: 25%

您目前使用的比例超过100％。 如果这不是问题，请发布html代码或使用Firebug检查宽度和填充/边距。这是最简单的方法。