Grid alignment problem

[Jay]

Here's a description of my problem. Could it have something to do with the styles that you ship with the grid?

I have a wrapper DIV with the following CSS properties:

height: auto !important;
margin: 0 auto -125px;
min-height: 100%;

Inside that DIV, I have two other DIVs. The first one is a menu aligned to the left side of the page with the following CSS properties:

float: left;
width: 160px;

To the right of the menu should appear the page content. It's another DIV. If I just type some content into it (some static text), all is well (i.e., it appears to the right of the menu and spans the rest of the screen). If, however, I allow the Kendo grid to populate it, it clobbers the menu, and either takes up the whole screen (if I don't use any CSS properties) and even extends below the menu (even though it contains only one row of data), or it appears as a tiny little area to the right of the menu, depending on what I set "display" as.

This DIV appears just fine in IE (i.e., it appears to the right of the menu and takes up the remainder of the screen space, regardless of browser width--the grid columns resize as I resize the browser). How do I get this to work in Chrome, too?

[Dimo]

Hi Jay,

The observed behavior in Chrome (and other good browsers) is expected and is according to web standards. Block-level elements, such as the Grid wrapper <div> go below floated elements. In order to prevent this, you have to float the Grid's parent <div>, or the Grid itself. You will also need an explicit width to the Grid or its parent.

All the best,
Dimo
the Telerik team