包装器和容器中的全宽元素

Question

*This is just a general question prior to the development, hence no code provided.

I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.

How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.

Answer 1

Im not sure exactly what you want without examples, but you may want to try something like this:

<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
    width980
<div id="fullwidth">
    fullwidth
</div>
</div>

Here, I made you a fiddle: http://jsfiddle.net/Wde8W/