Can I set width of 90% with overflow hidden.

Question

We have a div where we would like the width to be dynamic in the sense of say, 90 percent, of screen size. If the contents of the div will overflow we would like to hide the overflow.

I can only get the overflow to hide if I set the width to px rather than 90%.

Is there a way to do it with percentages?

EDIT

The problem seems to be that the div is properly hiding but it is inside of a table TD and the TD is resizing itself to the div as if it were not hidden.

EDIT

It appears that when a div is in a table, the size of the TD is calculated by getting the full size of the DIV before the percentage width property is calculated. Once the TD is resided, the percentage width for the div is then calculated.

Answer 1

I tried, and managed to do it with the following code:

    <div style="border: solid 1px red; width: 90%; overflow: hidden;white-space:nowrap;">
       Stuff in here will cut off at end of div.
    </div>

Answer 2

Try using "table-layout:fixed" - your table's columns will then remain the same size regardless of the content, and overflow:hidden will now do what you expect (at least it has for me so far in the browsers I've tested it with)