title: css disable scrolling in div
body: <p>I have a question that I cannot fix myself. I want to disable scrolling in the first div but still be able to scroll in the second div. So the first div (the blue one) is locked and keeps full height without being able to scroll.</p>
  
  <p>When u scroll with your mouse u should be able to continue scrolling but only in the second one.</p>
  
  <p>I did try giving position:fixed to the blue div but it messed up my page so I removed it.</p>
  
  <p>Please help me fix this problem and take a look at my code below:</p>
  
  <p>Thank you</p>
  
  <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>.blue {
      background-color: #92d2fc;
      background-image: url(../images/icons/idea.svg);
      background-size:24vw;
  }
  
  
  .gallery {
      height:100vh;
  }
  
  /*--- grid gallery/discription ----*/
  .left {
      float: left;
      width: 35%;
      height:100vh;
  }
  .right {
      float: left;
      width: 65%;
  }
  .right img {
      width:100%;
  }
  .group {
      clear: both;
  }
  .righttext{
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 70px;
      -moz-column-gap: 70px;
      column-gap: 70px;
      width: 65em;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      padding-top:3em;
      padding-bottom:5em;
  }
  
  
  
  
  
  
  
  /*media query*/
  
  @media screen and (max-width: 960px) {
      
  .left, .right {
          float: none;
          width: auto;
      }
      
  img {
      width: 100%;
      height: auto;
   }
      
  .righttext {
     width:55em;
     -webkit-column-count: 1; 
     -moz-column-count: 1;   
     column-count: 1;
      
  }
  
  
  @media screen and (max-width: 700px) {
          
  .columns {
          width:100%;
      }
  .blue {
      background-size:60vw;
      }
  .red, .yellow {
      background-size:100vw;
  }
  .righttext {
      width: 40em;
     -webkit-column-count: 1; 
     -moz-column-count: 1;   
     column-count: 1;
  }
  
  @media screen and (max-width: 600px) {
          
  h1 {
      width:13em;
    }
      
  h2 {
      width: 25em;
  }
  #intro img {
      width:350px;
      }
  .red, .yellow {
      background-size:100vw;
  
  }
  }
  
  @media screen and (max-width: 480px) {
  
  .righttext {
      width:25em;
     -webkit-column-count: 1; 
     -moz-column-count: 1;   
     column-count: 1;
  }   
  }    
  
  @media screen and (max-width: 350px) {
  
  .righttext {
      -webkit-column-count: 1; 
      -moz-column-count: 1;   
      column-count: 1;
      -webkit-column-gap: 0px; 
      -moz-column-gap: 0px; 
      column-gap: 0px;
      width:17em;
  }
  }
  /*-------- einde mediaqueries --------*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="group"&gt;
          &lt;div class="left"&gt;
            &lt;section class="gallery blue"&gt;
              &lt;h3&gt;About us&lt;/h3&gt;
              &lt;p class="gridtext"&gt;How the gym became a reality&lt;/p&gt; 
              &lt;/section&gt;    
                  &lt;/div&gt;
          
          &lt;div class="right"&gt;
              &lt;img src="http://www.bloovi.be/frontend/files/blog/images/source/google-zet-zijn-zoekresultaten-op-z-n-kop-en-zo-gaat-jouw-bedrijf-dat-voelen.jpg" alt="notagym picture"&gt;
              
              &lt;article class="righttext"&gt;
               &lt;h4&gt;over de gym&lt;/h4&gt;     
               &lt;p&gt;De Creativity Gym is een creative ruimte die werd bedacht en ingericht door drie docenten uit de opleiding Interactive Multimedia Design aan de Thomas More hogeschool te Mechelen. Robby Vanelderen, David Heerinckx en Joris Hens [volgorde foto] besloten de koppen bij elkaar te steken om een leegstaande turnzaal om te bouwen tot de ultieme co-working space waar creatieve developers en designers samenkomen om te werken aan hun projecten.&lt;/p&gt;&lt;/article&gt;
              
              &lt;img src="http://www.bloovi.be/frontend/files/blog/images/source/google-zet-zijn-zoekresultaten-op-z-n-kop-en-zo-gaat-jouw-bedrijf-dat-voelen.jpg" alt="notagym picture"&gt;
              
              &lt;article class="righttext"&gt;
              &lt;h4 class="rood"&gt;ontstaan&lt;/h4&gt;     
               &lt;p&gt;Tijdens de zomervakantie - die normaal gezien heilig is in onderwijskringen ;) - werden de handen uit de mouwen gestoken samen met hulpvaardige studenten en medewerkers van de hogeschool. Op 7 september 2013 werd de Gym officieel geopend door algemeen directeur Machteld Verbruggen, burgemeester Bart Somers en internetspecialiste Clo Willaerts. 
  
               Inspiratie werd zeker en vast geput uit de kantoren van Google, Facebook en andere spelers in Silicon Valley. De Creativity Gym is overdag een werkplek (zeg maar kantoor) voor de studenten Interactive Multimedia Design, maar 's avonds gaan er op regelmatige basis workshops, meetups en andere events door. &lt;/p&gt;&lt;/article&gt;
              
              
          &lt;/div&gt;
      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>