Html – DIV widths okay in IE, but not working in Chrome

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?

UPDATE:

I deleted browser data for IE and it turns out this is broken in IE, too.

UPDATE:

Here's some code and some screenshots:

    <body>

        <div class="wrapper">

            <div id="sidebar" class="hidden">
                <ul id="sidebarItems">
                    <li><a href="/Labor/1234" id="navMenuItemLabor">Labor</a></li>
                    <li><a href="/Sales/1234" id="navMenuItemSales">Sales</a></li>
                    <li><a href="/Quotes/1234" id="navMenuItemQuotes">Quotes</a></li>
                    <li><a href="/Price/1234" id="navMenuItemPrice">Price</a></li>
                    <li><a href="/PurchaseOrder/1234" id="navMenuItemPurchaseOrder">Purchase Order</a></li>
                    <li><a href="/Catalog/1234" id="navMenuItemCatalog">Catalog</a></li>
                </ul>
            </div>


<div id="grid"></div>


<script type="text/javascript"> 
    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: '/Sales/GetSalesHistory/1234',
                    dataType: "json",
                    type: "GET",
                    data: { id: "1234" }
                }
            },
            pageSize: 15,
            schema: {
                data: "data",
                total: "total"
            }
        },
        columns: [
            { field: "DateString", title: "Date" }
        ],
        pageable: true,
        sortable: true
    });
</script>

<script type="text/javascript"> 

    // Show the side menu.
    $("#sidebar").removeClass("hidden").addClass("visible");

    // Highlight menu item for current page.
    $("#sidebar a").removeClass("SelectedNavItem").addClass("UnselectedNavItem");
    $("#navMenuItemSales").removeClass("UnselectedNavItem").addClass("SelectedNavItem");

</script>

            <div class="push"></div>            
        </div>


        <script src="/Scripts/jquery.validate.min.js" type="text/javascript"> </script> 
        <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"> </script> 

        <script type="text/javascript">
            $("#topmenu").kendoMenu({
                dataSource:
                    [
                        {
                            text: "Home",
                            url: "/"
                        },
                        {
                            text: "Search",
                            url: ""
                        },
                        {
                            text: "Admin",
                            url: ""
                        }
                    ]
            });

            $("div.detailsMenuItem").hover(
                function ()
                {
                    $(this).addClass("HoverSidebar");
                },
                function ()
                {
                    $(this).removeClass("HoverSidebar");
                }
            );
        </script>

    </body>
</html>

Screenshots

How it should look (except automatically spanning the available screen width)–the CSS for this one is: Float left, width 500

Float left, width 500