diff --git a/slick.grid.js b/slick.grid.js
index 5e9d85eb2..4bc8ed8e9 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -728,8 +728,8 @@
           $footerRowScrollerL.width(canvasWidthL);
           $footerRowScrollerR.width(viewportW - canvasWidthL);
 
-          $footerRowL.width(canvasWidthL);
-          $footerRowR.width(canvasWidthR);
+          $footerRowL.width(headersWidthL);
+          $footerRowR.width(headersWidthR);
 
           $viewportTopL.width(canvasWidthL);
           $viewportTopR.width(viewportW - canvasWidthL);
@@ -755,7 +755,7 @@
 
           $footerRowScrollerL.width('100%');
 
-          $footerRowL.width(canvasWidth);
+          $footerRowL.width(headersWidthL);
 
           $viewportTopL.width('100%');
 
@@ -938,8 +938,9 @@
 
         var footerRowCell = $("<div class='ui-state-default slick-footerrow-column l" + i + " r" + i + "'></div>")
           .data("column", m)
-          .addClass(hasFrozenColumns() && i <= options.frozenColumn? 'frozen': '')
-          .appendTo(hasFrozenColumns() && (i > options.frozenColumn)? $footerRowR: $footerRowL);
+          .width(m.width - headerColumnWidthDiff)
+          .addClass(hasFrozenColumns() && i <= options.frozenColumn ? 'frozen' : '')
+          .appendTo(hasFrozenColumns() && (i > options.frozenColumn) ? $footerRowR : $footerRowL);
 
         trigger(self.onFooterRowCellRendered, {
           "node": footerRowCell[0],
@@ -1937,6 +1938,7 @@
       }
 
       updateColumnCaches();
+      createColumnFooter();
     }
 
     function applyColumnWidths() {
@@ -2062,7 +2064,6 @@
         invalidateAllRows();
         createColumnHeaders();
         createColumnGroupHeaders();
-        createColumnFooter();
         removeCssRules();
         createCssRules();
         resizeCanvas();