extend child div to right edge of entire page – Photoshop

UPDATE

EDIT: Sorry guys, I’m afraid that I defined the problem wrong, my bad.. I need this to have a image carousel (YELLOW) break out of the main text division (RED); only on the right side. So what would work as well for me is something like this:

Fiddle: 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? */
}

Now the main problem is to align the left border of “yellow” with the left border of the text divs (red).

I hope I’m being clear enough. Thanks for all the help so far 🙂 Sorry for making a mess out of this thread.

ORIGINAL POST

I try to let a child div connect to the righter outermost edge of the page. This div (yellow) is placed within a parent div (red) that fills only the center area of the page. Is this possible somehow?

Here’s the HTML:

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

Here’s the 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 */
}

Here’s the fiddle:
fiddle

Kind regards,
Steven

EDIT: here’s the photoshopped result:link