更新

编辑：对不起，伙计们，我恐怕我定义的问题错误，我的坏..我需要这个有一个图像旋转木马（黄色）打破了主要的文本部门（红色）;只在右边。所以对我来说也一样的是这样的：
小提琴：Link
HTML：

<div class="red">
This would contain the main text
</div>
<div class="yellow">
this div's left border should align with the red divs
<br/>
<br/>
this would be the image carousel
</div>
<div class="red">
this would also contain the main text
</div>

CSS：

.red{
position:relative;
height:100px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:relative;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
right:0px;
left:100px; /*how to align this left border to the other red divs? */
}

现在的主要问题是将“黄色”的左边框与文本div（红色）的左边框对齐。
希望我说得够清楚了。感谢所有的帮助到目前为止：）对不起，使这个线程的混乱。

原始帖子

我尝试让一个子div连接到页面的最右边。此div（黄色）放置在仅填充页面中心区域的父div（红色）中。这可能吗？
下面是HTML：

<div class="red">
    <div class="yellow">
        this div should extent to outermost right of entire page
    </div>
</div>

下面是CSS：

.red {
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
    background-color:#ff0000;
}
.yellow {
    position:absolute;
    height:200px;
    width:100%; /* idk how to solve this */
    background-color:#ffff00;
    top:100px;
    right:0px; /* this applies to div.red but should apply to the entire page somehow */
}

小提琴来了fiddle
亲切的问候，史蒂文
编辑：以下是Photoshop的结果：link