title: HTML Webpage Sidebars Acting Up
body: <p>Help, have been working for hours on this HTML Page. I've been viewing it in Chrome, but when I resize the page I notice that the sidebars I've added cover up everything. </p>
  
  <p>Here is what I wanted to do:</p>
  
  <p>Have a scroll bar when the page is resized (Keeping the page the same)</p>
  
  <p>Have one side bar one side, and to be able to slide over the page to find the other scroll bar. (I dont want the. covering everything up like they are now..)</p>
  
  <p>Here is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#img1 {
    width: 400px;
    padding-bottom: 25px;
  }
  #container1 {
    text-align: center;
  }
  #heading-contain {
    background-color: LightSeaGreen;
    width: 650px;
    margin: auto;
    border-radius: 7px;
    font-family: "adam", arial;
    color: white;
  }
  #heading2 {
    border-top: 1px solid white;
  }
  #heading1 {
    position: relative;
    top: 15px;
  }
  #heading2 h3 {
    position: relative;
    bottom: 6px;
    color: DarkSlateGrey;
  }
  #main-content {
    width: 650px;
    margin: auto;
    margin-top: 30px;
    background-color: LightSlateGrey;
    border-radius: 8px;
  }
  #text1 {
    padding-bottom: 30px;
    padding-top: 20px;
    font-family: arial;
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 200%;
  }
  #name {
    color: DarkSeaGreen;
    font-weight: bold;
    font-family: "dragon is coming";
    font-size: 300%;
  }
  body {
    background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #footer {
    background-color: LightSeaGreen;
    color: white;
    border: 1px double white;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    height: 30px;
    padding: 5px;
    font-family: "adam";
    font-weight: bold;
  }
  #footer p {
    margin: 5px;
  }
  #name:hover {
    color: LightCoral;
    cursor: default;
  }
  #line1 {
    text-align: center;
  }
  #paragraph {
    text-indent: 50px;
    display: inline-block;
  }
  #sidebar-left {
    background-color: LightSeaGreen;
    width: 200px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    position: fixed;
    font-family: "adam";
    color: white;
  }
  ul {
    margin: 0px;
    padding: 0px;
  }
  ul li {
    list-style: none;
  }
  ul li a {
    background-color: LightSlateGrey;
    color: white;
    border-bottom: 1px solid white;
    display: block;
    width: 180px;
    padding: 10px;
    text-decoration: none;
  }
  li:hover {
    background-color: DarkSeaGreen;
  }
  #sidebar-right {
    background-color: LightSeaGreen;
    width: 200px;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    position: fixed;
    font-family: "adam";
    color: white;
  }
  #sidebar-right h4 {
    width: 180px;
    padding: 10px;
  }
  #sidebar-right img {
    width: 160px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
  }
  #sidebar-right p {
    font-size: 13px;
    padding-right: 6px;
    padding-left: 6px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;HTML WEBPAGE 2 | Brett Carwile&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="container1"&gt;
      &lt;!-- Container1 contains all the elements on the page !--&gt;
      &lt;div id="heading-contain"&gt;
        &lt;!-- Heading-container contains everything in the header !--&gt;
        &lt;div id="heading1"&gt;
          &lt;!-- Heading1 is the top of the header which includes the h1 !--&gt;
          &lt;h1&gt;HTML Webpage 2&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id="heading2"&gt;
          &lt;!-- Heading2 is the bottom half of the header including the h3 !--&gt;
          &lt;h3&gt;By Brett Carwile&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="sidebar-right"&gt;
        &lt;h4&gt;About the Author&lt;/h4&gt;
        &lt;img src="DSC00071.jpg"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper gravida facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed dui diam. Nulla facilisi. Donec rhoncus dolor malesuada urna commodo lacinia. Sed vel nisi
          venenatis, aliquet nibh at, lobortis lacus. Etiam enim lacus, venenatis a sagittis ac, rhoncus in velit. Pellentesque turpis massa, condimentum eget eleifend non, sit amet justo. Vivamus accumsan iaculis placerat. Quisque blandit diam ut risus
          ultrices rutrum. Mauris pretium in augue ut lobortis. Vivamus tempor ac nisl at euismod. Maecenas laoreet a erat a varius. Curabitur consequat nunc vehicula tellus ornare, vitae aliquet sapien varius.
        &lt;/P&gt;
      &lt;/div&gt;
      &lt;div id="sidebar-left"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;Check out the awesome links above!!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id=main-content&gt;
        &lt;!-- This div is the main area below the header (text, img ect...) !--&gt;
        &lt;p id="text1"&gt;
          &lt;!-- This span is to seperate the first line from the rest of the text !--&gt;
          &lt;span id="line1"&gt; This is an HTML webpage by &lt;span id="name"&gt;Brett Carwile&lt;/span&gt;.&lt;/span&gt;
          &lt;br&gt;
          &lt;!-- This span is so that we can indent the text !--&gt;
          &lt;span id="paragraph"&gt;This is a text sample. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id quam nulla. Nam sollicitudin porta ligula, sit amet pharetra elit tincidunt sit amet. Suspendisse rhoncus, elit at consectetur sagittis, nisi eros molestie urna, et cursus elit sapien quis ante. Sed sit amet pulvinar neque. Pellentesque eget lorem ac lorem sodales rutrum. Nulla erat nisl, consequat non ante vitae, porttitor convallis magna. Duis pulvinar ornare nisi nec varius. Mauris tempus nisi non viverra vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum viverra erat eu rhoncus.
  
      Cras nec vulputate leo. Donec nunc mauris, varius id ligula eu, tincidunt euismod lorem. Praesent pharetra, ipsum et congue egestas, sapien augue feugiat lacus, ac tincidunt augue leo ut tortor. Mauris efficitur urna ut turpis ornare, eu consectetur lacus dapibus. Curabitur sit amet justo blandit est fermentum volutpat. Sed in gravida nunc. Integer sit amet risus in justo porttitor cursus. Mauris tortor purus, viverra a lacus et, suscipit molestie tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; &lt;/span&gt;
        &lt;/p&gt;
        &lt;img src="DSC00071.jpg" id="img1"&gt;
        &lt;div id="footer"&gt;
          &lt;p&gt;Thank you for viewing!!! © Brett Carwile 2016&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can try the HTML/CSS and resize the window to see what I mean. </p>