Full-width page sections

Original: http://jsfiddle.net/csswizardry/JFAAz/

by Jens Grochtdreis

HTML

<h1>HTML Ipsum Presents</h1>
    
 <p>Auch gibt es niemanden, der den Schmerz an sich liebt, 
sucht oder wünscht, nur, weil er Schmerz ist, es sei 
denn, es kommt zu zufälligen Umständen, in denen Mühen 
und Schmerz ihm große Freude bereiten können. Um ein 
<strong>triviales</strong> Beispiel zu nehmen, 
wer von uns unterzieht sich je anstrengender körperlicher 
Betätigung, außer um Vorteile daraus zu ziehen? Aber 
<a class="external ext" href="#">link</a> wer hat irgend 
ein Recht, einen Menschen zu tadeln, der die Entscheidung 
trifft, eine Freude zu genießen, die keine unangenehmen 
Folgen hat, oder einen, der Schmerz vermeidet, welcher 
keine daraus resultierende Freude nach sich zieht?
</p>


    <div class=section>

        <h2>Header Level 2</h2>
           
<ol>
  <li>Um ein triviales Beispiel zu nehmen.</li>
  <li>Aber wer hat irgend ein Recht, einen Menschen zu 
tadeln.</li>
  <li>Der den Schmerz an sich liebt.</li>
</ol>


    </div>

    <blockquote><p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. </p>
</blockquote>

    <h3>Header Level 3</h3>

<ul>
  <li>Auch gibt es niemanden, der den Schmerz an sich 
  liebt, sucht oder wünscht.</li>
  <li>Um ein triviales Beispiel zu nehmen, wer von uns 
  unterzieht sich je anstrengender körperlicher 
  Betätigung</li>
  <li>Welcher keine daraus resultierende Freude nach 
  sich zieht, außer um Vorteile daraus zu ziehen?</li>
</ul>


<pre><code>#header h1 a { 
    display: block; 
    width: 300px; 
    height: 80px; 
}</code></pre>

CSS

html{
    overflow-x:hidden; /* This is nasty, be careful!!! */
    font-family: Helvetica, Arial, sans-serif;
}
body{
    max-width:640px;
    margin:0 auto;
    padding:0 1em;
}
.section{
    padding:1em 999px;
    margin:0 -999px;
    color:#fff;
    background-color:#a20000;
}