title: html and css placing a non-fixed div between two fixed divs
body: <p>I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.</p>
  
  <p>design im looking to get:</p>
  
  <p><a href="http://i.stack.imgur.com/9bFoU.jpg" rel="nofollow">design</a></p>
  
  <p>source (html):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="menu"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="contact"&gt;&lt;/div&gt;
  
      &lt;div class="upper"&gt;&lt;/div&gt;
  
      &lt;div class="main"&gt;
          &lt;div class="paragraph"&gt;&lt;/div&gt;
          &lt;div class="paragraph"&gt;&lt;/div&gt;
          &lt;div class="paragraph"&gt;&lt;/div&gt;
          &lt;div class="paragraph"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>source (css):</p>
  
  <pre><code>/**/
  html,body{
      height: 100%;
  }
  
  body {
    background-image: url("background.jpg");
  }
  
  div {
      margin: 0px;
  }
  
  .menu {
    background-color:lightgray;
    color:black;
    width: 200px;
    height: 100%;
    top:200px;
    right: 0;
    text-align: center;
    position:fixed;
  }
  
  .contact {
    background-color:lightgray;
    color:black;
    width: 200px;
    height: 100%;
    top: 200px;
    left: 0;
    text-align: center;
    position:fixed;
  }
  
  .upper {
      background-color: black;
      width: 100%;
      height: 200px;
      position:fixed;
      top:0px;
      left:0px;
  }
  
  .main {
      background-color: green;
      width: 100%;
      margin-top:200px;
      height: 200vh;
      left: ;
  }
  
  .paragraph {
      background-color: red;
      width: 100%;
      height: 50vh;
  }
  </code></pre>
  
  <p>i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div</p>
  
  <p>the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.</p>
  
  <p>the .js file is currently still empty so i didnt post any source of it.</p>
  
  <p>Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!</p>
  
  <p>edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/zt1Lyaop/" rel="nofollow">http://jsfiddle.net/zt1Lyaop/</a></p>