Stretch a Div to Browser width when inside many containers - html

Question

I have read answers on Stackoverflow, on how to stretch a div to full width when inside a fixed width container. But those are valid only if the content is inside one fixed container, what if the content is inside many div tags whose widths have been differently specified.
<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>
Setting position to absolute and left and right to 0 simply doesn't work.

Answer 1

here is a jsfiddle that will help you http://jsfiddle.net/Fm7M5/
in your example (if i understand the question correctly), once CONTAINER has a width of 50%, that width is 100% for all of it's nested elements. so, the unclassed divs & CONTAINER-TO-STRETCH all have an automatic width that is 100% of CONTAINER.
so, you will need give CONTAINER-TO-STRETCH a width that larger than the width of its container.
in the jsfiddle, you can see the following (where TEST is a class given to one of the unclassed divs)
.container {
background-color: red;
}
.container-to-stretch {
background-color: yellow;
width: 400%;
}
.test {
width: 25%;
background-color: blue;
}
so, CONTAINER has a width that is 50% of the body, TEST has a width that is 25% of 50% of the body, and CONTAINER-TO-STRETCH has a width that is 400% of 25% of 50% of the body.