100% Browser Width Div Inside Smaller Div

MichaelK

New Member
I have a div of \[code\]width: 1000px\[/code\] 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:\[code\]<div class="centreContainer"> <div class="menuContainer"></div></div>\[/code\]CSS:\[code\]html, body{ margin: 0; padding: 0;}.centreContainer{ margin: auto; width: 1000px;}.menuContainer{ width: <what to do>; height: 420px;}\[/code\]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:\[code\]<variable> / 10\[/code\] (10 because 1000 / 100 = 10, where 1000 is the width of the centre container) And have the menuContainer set on \[code\]margin: auto;\[/code\] so it is centered.
 
Back
Top