title: Setting overflow:hidden only for certain elements
body: <p><a href="http://jsfiddle.net/waitinforatrain/sEX3n/" rel="noreferrer">http://jsfiddle.net/waitinforatrain/sEX3n/</a></p>
  
  <p>I have two divs in a container with absolute position. Both of them are set to be outside the boundaries of the container. If I uncomment the overflow: hidden line it will hide everything outside the container.</p>
  
  <p>However, I only want div1's overflow to be hidden, and div2's to be visible. But because overflow:hidden has to be set in the parent, it will hide both of them. Is there any way to hide one?</p>
  
  <p>Even if I could get it so that it shows overflow at the top and bottom boundaries but not at left and right that would suit (I tried messing with overflow-x and overflow-y but I gather that that's not their intended purpose).</p>
  
  <pre><code>&lt;div id="container"&gt; 
      &lt;div id="div1"&gt;&lt;/div&gt; 
      &lt;div id="div2"&gt;Test&lt;/div&gt; 
  &lt;/div&gt; 
  
  #container {
      width: 300px;
      position: relative;
      border: 1px solid #000;
      height: 10px;
      /*overflow: hidden;*/
  }
  
  #div2 {
      position: absolute;
      top: 16px;
      border: 1px solid #444;
  }
  
  #div1 {
      position: absolute;
      height: 10px;
      left: 90%;
      width: 15%;
      background-color: purple;
  }
  </code></pre>