title: text-overflow ellipsis does not work with dynamic width
body: <p>hope someone can help.</p>
  
  <p>I have 3 nested div. Parent, children and children's children.</p>
  
  <p>What i want to accomplish (the motive is not relevant) is that that child gets a relative width depending on the parent's width (a percentage) and the children's children must have an overflow ellipsis depending on that width. The problem is that if i use a % in the children's width the ellipsis does not work and if i define the width in pixeles it work.</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div class="a"&gt;
     &lt;div class="b"&gt;
          &lt;div class="c"&gt;
          Here should go some text long enough to ellipsis the overflow
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the nonworking CSS</p>
  
  <pre><code>    .a {
          border:black 1px solid;
          float: left;
          width: 122px;
          display: table;
          line-height: 14px;
      }
      .b {
          width:100%;
          color: black;
          font-size: 14px;
          text-transform: uppercase;
          cursor: pointer;
      }
      .c {
          line-height: 11px;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space:nowrap;
      }
  </code></pre>
  
  <p>However if i change b's width for 122px it works perfect (note that 122px should equal 100%).</p>
  
  <p>You can check it here: <a href="http://jsfiddle.net/vNRpw/4/">http://jsfiddle.net/vNRpw/4/</a></p>
  
  <p>Thanks!</p>