Gridview display problem

The code below is a JavaScript which will Freeze Gridview Header,it works but the Gridview display on the side of the Header instead of below the header????

Any idea how to fix this?

 var GridId = "<%=GridView1.ClientID %>"; 
         var ScrollHeight = 600;
         window.onload = function () {
             var grid = document.getElementById(GridId);
             var gridWidth = grid.offsetWidth;
             var gridHeight = grid.offsetHeight;
             var headerCellWidths = new Array();
             for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                 headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
             }
             grid.parentNode.appendChild(document.createElement("div"));
             var parentDiv = grid.parentNode;

             var table = document.createElement("table");
             for (i = 0; i < grid.attributes.length; i++) {
                 if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                     table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                 }
             }
             table.style.cssText = grid.style.cssText;
             table.style.width = gridWidth + "px";
             table.appendChild(document.createElement("tbody"));
             table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
             var cells = table.getElementsByTagName("TH");

             var gridRow = grid.getElementsByTagName("TR")[0];
             for (var i = 0; i < cells.length; i++) {
                 var width;
                 if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                     width = headerCellWidths[i];
                 }
                 else {
                     width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                 }
                 cells[i].style.width = parseInt(width - 3) + "px";
                 gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
             }
             parentDiv.removeChild(grid);

             var dummyHeader = document.createElement("div");
             dummyHeader.appendChild(table);
             parentDiv.appendChild(dummyHeader);
             var scrollableDiv = document.createElement("div");
             if (parseInt(gridHeight) > ScrollHeight) {
                 gridWidth = parseInt(gridWidth) + 10;
             }
             scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
             scrollableDiv.appendChild(grid);
             parentDiv.appendChild(scrollableDiv);
}

Select allOpen in new window