css - Expanding nested container to page width -

i have div fixed width of 960px , nested containers no specific width stretches parent container. possible, without removing outer container, stretch inner container full page width, in same time, content should wide outer container.

a little example:

+------------------------------------------------+   |                      browser window (100%)     | |                                                | |     +-----------------------------------+      |  |     | (a)     inner container (960px)   |      |  |     |                                   |      |  |*****|***********************************|******|  |     |  (b)                              |      |  |     |                                   |      |  |     |  should stretch 100% of   |      |  |     |   body , have inner width of    |      |  |     |     of 960px (or same      |      |  |     |         closest parent)           |      |  |     |                                   |      |  |*****|***********************************|******|  |     |                                   |      |  |     +-----------------------------------+      |  |                                                |  +------------------------------------------------+ 

the reasoning behind have specify background of block, have problems in case if remove outer container specifies fixed width.

update: inner container (b) should inside (a) this:

<div class="container" style="width:960px">        <div class="box">             box should stretch 100% of page , must have non-fixed height.        </div> </div> 

there should multiple containers on page, of them should stretch, not. absolute positioning breaks normal flow of document , subsequent containers overlapped previous.

you use position absolute

demo http://jsfiddle.net/kevinphpkevin/c8tnp/2/

.box {     background:#ccc;     position:absolute;     left:0;     right:0; }