title: hide half of a div with overflow is'nt working
body: <p>i've used overflow property to make the half of div that i don't want hidden , but the whole div gone.</p>
  
  <pre><code>.line {
      position: relative;
      overflow: hidden;
  }
  
  .gl {
      position: absolute;
      right: 10px;
      width: 100%;
      height: 5px;
      background-color: green;
      display: block;
  
  }
  
  .rl {
      position: absolute;
      width: 100%;
      left: 30px;
      height: 5px;
      background-color: red;
      display: block;
  }
  </code></pre>
  
  <p>and this html code</p>
  
  <pre><code>&lt;div class='m1'&gt;
          MAIN 1
          &lt;div class='line'&gt;&lt;div class="rl"&gt;&lt;/div&gt;&lt;div class='gl'&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='des'&gt;kasjfnkvanj&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i want to hide both lines green and red , only the extend part that overflows the parent div but all of them get hidden</p>
  
  <p>any help?</p>