title: How to deny "nowrap" to increase width of element?
body: <p>I have a structure like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td class = "one"&gt;This cell should has width 60%&lt;/td&gt;
      &lt;td class = "two"&gt;
          &lt;div&gt;
              &lt;div class = "three"&gt;Hint&lt;/div&gt;
              &lt;div class = "four"&gt;
                  And ending of this string should be cutted out with ellipsis, no matter how long string will be
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>with css</p>
  
  <pre><code>.one { width: 60%; }
  
  .three {
      display: none;
      float: right;
  }
  
  .two:hover .three { display: block; }
  
  .four {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>I want the left cell always has width of 60% and the right cell to take all other space. A long single-lined text in the right cell should be truncated with ellipsis, both when "hint" element is and isn't visible.</p>
  
  <p>I've tried to use <code>display: inline</code>, <code>float: left</code>, <code>position: absolute</code>, but didn't get any result that wouldn't ruin floating hint element at right side.</p>
  
  <p>jsFiddle here: <a href="http://jsfiddle.net/Z2kLV/1/" rel="nofollow">http://jsfiddle.net/Z2kLV/1/</a></p>
  
  <p>Also, solution doesn't have to be cross-browser, I need it only for chrome.</p>
  
  <p>Please, help, I can't get this done</p>