Html 文本落在右列的底部

我希望有人能帮上忙，我想不出来。我正在使用这个模板创建一个wordpress主题，我的右栏有问题

如果我只插入一组换行符，那么流程是正确的。但是，只要我插入任何文本、img或任何其他内容，该数据就会落在中间列的下方

我知道这很简单，只是我没有看到

这里是该页面的链接

这是css

.content-area {
        float: left;
}
.site-content {
        margin: 0 20%;
        width: 60%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
        background: #ffffff;
}
.pictures {
        margin: 0 81%;
        width: 20%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background: #ffffff;
}
.site-main .widget-area {
        float: left;
        margin: 0 0 0 -100%;
        width: 20%;
        background: #2E9AFE;
        background: #333333;
}
.site-footer {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}
.site-header {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}

.menu-div {
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background-color: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        overflow: visible;
}

#page {
        width: 90%;
        margin: 0 auto;
}

---

问题在于你怪异的专栏布局。将

左边距-100%

赋给

.widget区域

，而不仅仅是在

#primary

列之前呈现。您的

#pictures

列没有浮动，因此它在

#primary

容器之后的流动是100%

选项1）将列放在它应该去的地方，不要使用负边距

---

选项2）为

#primary

（看起来大约60%）指定一个固定宽度，并将

#pictures

浮动到左侧

您确实需要对列布局标记进行一些更改。我对您的标记和css进行了一点编辑以使其正常工作（我不建议您使用它）。看看

离题： 就我个人而言，我更喜欢将固定宽度用于侧边栏/左右列，而仅将流体宽度用于内容区域

---

希望这对您有所帮助。

问题在于我不得不减小右侧栏的大小。我猜添加边框会使尺寸增加到100%以上。

关于固定宽度的好建议。谢谢