title: How to hide overflown content of floated element
body: <p>I have 2 columns 50% width each. Inside each column I have overflown content positioned absolutely relative to body. </p>
  
  <pre><code>&lt;div class='column left'&gt;
      &lt;div class='inner'&gt;&lt;h1&gt;Pink&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='column right '&gt;
      &lt;div class='inner'&gt;&lt;h1&gt;Blue&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need the <code>inner</code> divs to be hidden. How do I do that? Setting <code>overflow:hidden</code> on .column has no effect on <code>inner</code> divs. <a href="http://jsfiddle.net/e2rM5/12/" rel="nofollow">Fiddle HERE</a></p>
  
  <p>PS. The idea is to animate the width of the columns and show the inner content. <a href="http://jsfiddle.net/e2rM5/5/" rel="nofollow">This fiddle</a> illustrates what i am trying to achieve (but it is using <code>vh</code>, <code>vw</code> that I cannot use due to browser requirement)</p>
  
  <pre><code>html, body {
      width :100%;
      height: 100%;
      position: relative;
  }
  
  .column {
      float: left;
      width: 50%;
      height: 100%;
      overflow: hidden; /*has no effect*/
  }
  
  .inner {
      position: absolute;
      top: 50%;
      width: 100px;
  }
  
  .left .inner {
      right: 20px;
      text-align: right;
  }
  
  .right .inner {
      left: 20px;
      text-align: left;
  }
  </code></pre>