title: overflow:hidden issue internet explorer 7
body: <p>HTML</p>
  
  <pre><code>&lt;div class="block"&gt;
      &lt;div class="element1"&gt;text text text text &lt;/div&gt;
      &lt;div class="element2"&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>.block{
      background:#F00;
      float: left;
      height: 90px;
      padding: 0 24px 0 0;
      position: relative;
      width: 256px;
  }   
  .block .element1{
      color: #000;
      display: block; 
      float: left;
      font-size: 32px;
      height: 35px;
      overflow: hidden;
      padding: 25px 0 0;
      text-align: right;
      width: 100%;
  }
  .block .element2 {
      color: #000;
      display: block;
      float: right;
      font-size: 12px;
      height: 14px;
      line-height: 1.1;
      margin: 15px 0 0;
      max-width: 205px;
      overflow: hidden;
      padding: 0 0 0 15px;
      text-align: right;
      width: auto;
  }
  </code></pre>
  
  <p>overflow:hidden attr in element2 class => There isn't any problem for IE8,9,FF,Chrome,Safari,Opera but if I open page with IE7 texts don't display. Added position:relative attr to block class (wrapper class) but there isn't any change ( <a href="https://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo">IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo</a> ) How can I fix the issue?  <a href="http://jsfiddle.net/L5Y57/" rel="nofollow noreferrer">http://jsfiddle.net/L5Y57/</a></p>