title: 100% width header and footer
body: <p>I'm new to CSS and am designing my first site from scratch using CSS (I've recently graduated from the <em>for the love of God stop using html to style your websites</em> way of life).</p>
  
  <p>I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I've started the code but I'm stuck. The header will have a logo and the navigation (I haven't coded the navigation yet but that's not too hard) and the footer will simply have one line of content.</p>
  
  <p>I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that's way more than what I want.</p>
  
  <p>Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;!-- begin wrapper --&gt;
  &lt;div id="wrapper"&gt;
  
  &lt;!-- begin header --&gt;
    &lt;div id="header"&gt;
      &lt;p&gt;Content&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;!-- begin navigation --&gt;
    &lt;div id="navigation"&gt;
      &lt;ol&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;Page 1&lt;/li&gt;
      &lt;li&gt;Page 2&lt;/li&gt;
      &lt;li&gt;Page 3&lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/div&gt;
  
  &lt;!-- begin content --&gt;
    &lt;div id="content"&gt;
      &lt;h1&gt;Heading&lt;/h1&gt;
      &lt;p&gt;Content&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;!-- begin footer --&gt;
    &lt;div id="footer"&gt;
      &lt;p&gt;Content&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
  
  #header {
      background: #636769;
  }
  
  #navigation {
  }
  
  body {
      font-family: 'PT Sans Narrow', sans-serif;
      font-size: 16pt;
      background: url(../images/texture.png);
  }
  
  #wrapper {
      width: 938px;
      margin: 0 auto;
      padding: 20px 20px;
      background: white;
  }
  
  #footer {
     background: #636769;
  }
  </code></pre>