Problem with a datagrid scrolling within a DIV

[Jackpanel]

I'm working on a app that helps build quotes and invoices. On one of the pages, I have a datagrid to display a table of all items that have been added so far. To help control the layout, I put this datagrid in a scrolling DIV, so that a maximum of 5 items are displayed, and a vertical scroll bar appears.

 

This is working great, except under one condition - if a description is entered that is too long for the table cell. Because of the way I have it formatted, I can't have cells wrap their contents, and I can't have a horizontal scroll bar. What I need to do is either truncate strings that take up too much space, or figure out a way to strictly enforce the table width no matter how large the contents.

 

I've got a sample of the output here:

 

http://www3.sympatico.ca/jasongraham/divscroll.html

 

View source to see how each is set up.

 

The third one is closest to what I need, but the right scrollbar is being cut off.

 

Any suggestions on how I can handle this? I'd truncate the description strings, but comparing character counts won't work because I'm not using a font with fixed character widths (i.e. "iiiiiiiiii" takes up much less space than "OOOOOOOOOO")

[Jackpanel]

Solved

 

I finally figured it out. If anyone is interested, I used 3 DIVs to produce the effect:

 

<div style='OVERFLOW: auto; WIDTH: 614px; HEIGHT: 101px'>

<div style='OVERFLOW: hidden; WIDTH: 598px;'>

<div style='OVERFLOW: visible; WIDTH: 614px; HEIGHT: 101px'>

 

Innermost DIV allows the table to go as wide as it takes. Middle DIV chops the table off at with overall table width minus the scroolbar, then the outermost DIV has full scroll bars allowed, but only needs it for vertical.

 

It would have been much easier if the Overflow property allowed for vertical and horizontal only :mad: