100% Browser Width Div Inside Smaller Div

Question

I have a div of width: 1000px and inside that is a child which I wish to span the entire width of the browser window.

The trouble is, I don't know how to override previous width inheritance.

I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.

Markup:

<div class="centreContainer">

    <div class="menuContainer"></div>

</div>

CSS:

html, body
{
    margin: 0;
    padding: 0;
}

.centreContainer
{
    margin: auto;
    width: 1000px;
}

.menuContainer
{
    width: <what to do>;
    height: 420px;
}

Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:

<variable> / 10 (10 because 1000 / 100 = 10, where 1000 is the width of the centre container)

And have the menuContainer set on margin: auto; so it is centered.

Answer 1

Just use position :

.menuContainer
{
    position: absolute;
    width: 100%;
    height: 420px;
}

Answer 2

Just use position:absolute shown in this jsfiddle

.menuContainer
{
    width: 100%;
    height: 420px; 
    position: absolute;
}

Answer 3

you could try placing your .menuContainer as absolute position into a relative parent position . JSfiddle

#root{
display:block;
position: relative;

}

.menuContainer{
position:absolute;
top: 50px;
left: 0;

}