无法理解为什么div不填充父div？

Question

我有下一个html：

<div class="content">
        <div class="page">
        </div>
        <div class="sidebar">
        </div>
</div>

和CSS：

.content {
    position: relative;
    width: 90%;
    margin: 100px auto 30px auto;
}

.page {
    float: right;
    border-color: orange;
    border-style: double;
    border-width: 40px;
    border-image: url("images/bg_paper.png") 42 fill repeat;
    padding: 10px;
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    right: 0;
    background-color: red;
    width: 200px;
    min-height: 70px;
}

带有page类的div按内容换行，但是我需要填充除sidebar宽度以外的父级宽度。 也许很简单，但是Imma noobie在CSS中。
PS对不起，我的英语。

Answer 1

那就是你所需要的

.content {
    position: relative;
}

.page {
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

Answer 2

在您的代码中，您说内容宽度= 90％。 在这90％中，您希望.page div向右浮动，这意味着它的左边界从90％的50％开始。 您应该删除float：right并根据需要设置边栏的宽度。 您的代码如下所示：

.content {
position: relative;
width: 90%;
margin: 100px auto 30px auto;
}

.page {
    border-color: orange;
    border-style: double;
    border-width: 40px;
    border-image: url("images/bg_paper.png") 42 fill repeat;
    padding: 10px;
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    right: 0;
    background-color: red;
    width: 200px;
    min-height: 70px;
}

这应该做。