How to stretch a header across a web page background with CSS

Question

http://www.stumbleupon.com/

http://www.mixx.com/

Both of these websites have a background header stretched across the page while the content is centered and is covering like say 80% of the width, and that also perfectly aligns with the rest of the layout.

I am particularly interested in these two sites, because the header has two background colors, not just one.

I am sure there are tons of tutorials on the web, but I do not the keywords to search for.

Answer 1

Analyzing stumbleupon.com:

The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors. These divs have only one child each that has the CSS property

margin: 0 auto

This results in a horizontal centering.

This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.

The structure looks like this:

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

If you get Firebug for Firefox, you can easily analyze the elements yourself.