title: CSS3 alternative for 100% width header/footer with fixed width content
body: <p>I want to create a header and footer effect like the one that stackoverflow itself uses where the content of each is fixed but the background-color stretches for the width of the screen.</p>
  
  <p>One way to do this is to wrap the header and footer in a container, make the container full width with the background-color and then set the width of the header and footer themselves to the fixed size.</p>
  
  <p><a href="http://jsfiddle.net/fpu2w/3/" rel="nofollow noreferrer">Here is a demo</a> of how to achieve this effect using containers.</p>
  
  <p>However, I don't like that this forces an extra div into the layout and figured there must be a better way to do this with CSS3.</p>
  
  <p>One option is to use multiple backgrounds but this seems excessive just to set a simple color. Unfortunately, it doesn't seem possible to set multiple background colors.</p>
  
  <p>I've tried playing around with gradients, generated content etc but can't find a solution. Is there anything out there that is better than the extra div?</p>
  
  <p>I only need a solution that works in modern browsers like Firefox and Chrome.</p>
  
  <p><strong>Overview of Solutions</strong></p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/5524412/css3-alternative-for-100-width-header-footer-with-fixed-width-content/5540804#5540804">CSS Gradients on HTML tag</a></li>
  <li><a href="https://stackoverflow.com/questions/5524412/css3-alternative-for-100-width-header-footer-with-fixed-width-content/5524656#5524656">Borders on HTML tag</a></li>
  <li><a href="https://stackoverflow.com/questions/5524412/css3-alternative-for-100-width-header-footer-with-fixed-width-content/5524424#5524424">Background-color on HTML/Body tag (only allows for 1 stripe)</a></li>
  </ol>