extend child div to right edge of entire page - html

Question

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

Answer 1

Use below css. let me know is it the one you are looking.
.red{
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:absolute;
height:200px;
width:400px; /* idk how to solve this */
background-color:#ffff00;
top:100px;
right:0px;
left:0px;
/* this applies to div.red but should apply to the entire page somehow */
margin:auto;
}

Answer 2

Do you need this?
.red {
height: 500px;
width: 500px;
margin: 0 auto;
background-color: #ff0000;
}
.yellow {
position: absolute;
height: 200px;
background-color: #ffff00;
top: 100px;
left: auto;
right: 0px;
}
UPD: I'm not sure that you can find only-CSS solution. So, you can add some jQuery or pure JS.