对齐divs-2的相对边缘

Question

我希望绿色框始终位于红色标题的左下方，即使用户放大和缩小网页也是如此。

演示：http://jsfiddle.net/BvQcx/

现在，我想要一些保留左边的属性给绿框。或者说红色框总是在中心。有人可以为我提供一个jsfiddle解决方案吗？解决方案必须是基于div的布局。

类似问题：Aligning opposite edges of divs

                         |Red Box|
               |Green Box|

Answer 1

将绿色框放在红色框div内，但将其设为position: absolute。然后将其向左移动绿框的宽度：

<强> HTML：

<div class="header">This is the header.
    <div class="leftSection">This is the left section</div>
</div>

<强> CSS：

.header {
    margin:0px auto;
    width:100px;
}
.leftSection {
    position: absolute;
    width: 100px;
    left: -100px;
}

小提琴：http://jsfiddle.net/BvQcx/1/