title: Website doesn't scroll | Contents extend outside bottom of page | Footer appears on top
body: <h2>Problem 1: Scrolling/Showing contents</h2>
  
  <p>The page doesn't recognize the text and images within a div in the body. The text/images go outside the page on the bottom. They are visible if one zoom out. I tried to add a scrollbar, but scrollbar won't scroll because it doesn't recognize any content that has gone outside the page.</p>
  
  <h2>Problem 2: Footer is at the top</h2>
  
  <p>Because the contents in the div are not recognized, the footer that should be on the bottom of the page ends up at the top like a header. </p>
  
  <h1>The Codes:</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* PARTS OF THE PAGE */
  body
  {
      background-color: #f2f2f2;
      margin: 0px;
  
  }
  
  .sidebar {
      background-image: url(http://images.all-free-download.com/images/graphiclarge/blurred_golden_background_192849.jpg);
      height: 100%;
      width: 400px;
      border-right: 2px solid #ddd;
      position: fixed;
      background-repeat: repeat-y;
  }
  
  .maintext {
      margin-left: 450px;
      width: 600px;
      padding: 0px 50px 10px 50px;
      position: absolute;
      overflow: visible;
  
  }
  
  footer {
      padding: 10px;
      position: relative;
      background-color: red;
  
  }
  
  /* TEXT */
  h1 {
      text-align: center;
      height: 30px;
      font-family: 'Imprint MT Shadow';
      font-weight: 100;
      font-size: 50px;
      padding-bottom: 20px;
      letter-spacing: 20px;
      color: #fff7e6;
      text-shadow: 0px 1px 2px #706b51;
  }
  
  h2 {
      text-align: center;
      font-family: 'Century Gothic';
      letter-spacing: 10px;
      padding-top: 10px;
      font-weight: 200;
  }
  
  p {
      letter-spacing: 2px;
      font-size: 12px;
      font-family: Calibri;
      padding-left: 10px;
      padding-right: 10px;
  }
  
  
  .maintext p {
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .quote {
      background-color: gray;
      margin: 0px 90px 0px 90px;
  }
  
  ul#menu li{
      display: inline;
      letter-spacing: 1px;
      border-left: 1px solid #706b51;
      padding-right: 40px;
      padding-left: 5px;
      font-size: 11px;
      font-family: Candara;
      color: #706b51;
  }
  
  hr {
      margin: -10px 80px -10px 80px;
      color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="archive.css" /&gt;
      &lt;title&gt;title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="sidebar"&gt;
          &lt;div class="maintext"&gt;
  
              &lt;!-----------------The menu --------------------&gt;
              &lt;h1&gt; header 1       &lt;/h1&gt;
              &lt;hr /&gt;
  
              &lt;center&gt;
                  &lt;ul id="menu"&gt;
                      &lt;li&gt;Link 1&lt;/li&gt;
                      &lt;li&gt;Link 2&lt;/li&gt;
                      &lt;li&gt;Link 3&lt;/li&gt;
                      &lt;li&gt;Link 4&lt;/li&gt;
                      &lt;li&gt;Link 5&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;hr /&gt;
              &lt;/center&gt;
  
              &lt;!------------------The post -------------------&gt;
  
              &lt;h2&gt; Title 2 &lt;/h2&gt;
              &lt;p class="quote"&gt; This is a block with quote.&lt;/p&gt;
  
          
                  &lt;p&gt; Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom. &lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom. &lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  
  Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.&lt;br&gt;
  &lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;footer&gt; &lt;p&gt; This is the footer. The page does not recognize any of the content within the body, so this ends up right at the top of the page. &lt;b&gt; JOY &lt;/b&gt; &lt;/p&gt;&lt;/footer&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>