If grid is floated to left, unsized columns behave differently in different browsers.

[Andrew]

Here's what I'm trying to achieve: I want to have a data grid on the left and a column of buttons on the right.
I want the data grid on the left to take as much space as it needs but no more.

My grid has three columns. The first two are fixed size, and the third isn't. Optimistically, I thought that would mean that the third column takes as much space as it needs.

On Chrome, this third column has a width of 0.
On IE9, this third column takes up 100% of the remaining width of the screen.

Neither of these behaviors is what I want. I want it to take up as much space as it needs to hold the content.

Here's my working example:   js fiddle example   

View this same example in Chrome and IE9 and you'll see the difference.


Can somebody provide me ideas to solve this problem?

(I could put the whole grid and the buttons in one big layout table, but that will be using a table for layout purposes - the CSS police will come knocking :-) )

[Dimo]

Hello Andrew,

The described behavior and layout can be achieved if you disable Grid scrolling with scrollable:false.

Regards,
Dimo
the Telerik team