diff --git a/src/main/webapp/scripts/facets/range-facet.js b/src/main/webapp/scripts/facets/range-facet.js
index ed92790e2..aa98dde1c 100644
--- a/src/main/webapp/scripts/facets/range-facet.js
+++ b/src/main/webapp/scripts/facets/range-facet.js
@@ -196,6 +196,9 @@ RangeFacet.prototype._renderOtherChoices = function() {
     var tr0 = table.insertRow(0);
     var tr1 = table.insertRow(1);
     
+    /*
+     *  Numeric
+     */
     var td00 = $(tr0.insertCell(0)).attr("width", "1%");
     var numericCheck = $('<input type="checkbox" />').appendTo(td00).change(function() {
         self._selectNumeric = !self._selectNumeric;
@@ -209,21 +212,11 @@ RangeFacet.prototype._renderOtherChoices = function() {
     $('<span>').text("Numeric ").addClass("facet-choice-label").appendTo(td01);
     $('<span>').text(this._numericCount).addClass("facet-choice-count").appendTo(td01);
     
+    /*
+     *  Blank
+     */
     var td02 = $(tr0.insertCell(2)).attr("width", "1%");
-    var nonNumericCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
-        self._selectNonNumeric = !self._selectNonNumeric;
-        self._updateRest();
-    });
-    if (this._selectNonNumeric) {
-        nonNumericCheck[0].checked = true;
-    }
-    
-    var td03 = $(tr0.insertCell(3));
-    $('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td03);
-    $('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td03);
-    
-    var td10 = $(tr1.insertCell(0)).attr("width", "1%");
-    var blankCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
+    var blankCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
         self._selectBlank = !self._selectBlank;
         self._updateRest();
     });
@@ -231,10 +224,29 @@ RangeFacet.prototype._renderOtherChoices = function() {
         blankCheck[0].checked = true;
     }
     
-    var td11 = $(tr1.insertCell(1));
-    $('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td11);
-    $('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td11);
+    var td03 = $(tr0.insertCell(3));
+    $('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td03);
+    $('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td03);
     
+    /*
+     *  Non-Numeric
+     */
+    var td10 = $(tr1.insertCell(0)).attr("width", "1%");
+    var nonNumericCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
+        self._selectNonNumeric = !self._selectNonNumeric;
+        self._updateRest();
+    });
+    if (this._selectNonNumeric) {
+        nonNumericCheck[0].checked = true;
+    }
+    
+    var td11 = $(tr1.insertCell(1));
+    $('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td11);
+    $('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td11);
+    
+    /*
+     *  Error
+     */
     var td12 = $(tr1.insertCell(2)).attr("width", "1%");
     var errorCheck = $('<input type="checkbox" />').appendTo(td12).change(function() {
         self._selectError = !self._selectError;
diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js
index 46e46fcec..d2c80d495 100644
--- a/src/main/webapp/scripts/project.js
+++ b/src/main/webapp/scripts/project.js
@@ -48,28 +48,60 @@ function initializeUI(uiState) {
         })
         .appendTo(path);
     
-    var body = $("#body").empty();
+    var body = $("#body").empty().html(
+        '<div bind="viewPanel" class="view-panel"></div>' +
+        '<div bind="facetPanel" class="facet-panel"></div>' +
+        '<div bind="historyPanel" class="history-panel"></div>' +
+        '<div bind="processPanel" class="process-panel"></div>' +
+        '<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
+    );
+    ui = DOM.bind(body);
     
-    var table = document.createElement("table");
-    $(table).attr("cellspacing", 20).css("width", "100%");
-    body.append(table);
-    
-    var tr = table.insertRow(0);
-    var tdLeft = tr.insertCell(0);
-    var tdRight = tr.insertCell(1);
-    tdRight.setAttribute("width", "250");
-    
-    ui.viewPanel = $('<div></div>').appendTo(tdLeft);
-    ui.facetPanel = $('<div></div>').appendTo(tdRight);
-    ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
-    ui.processPanel = $('<div></div>').addClass("process-panel").appendTo(document.body);
-    ui.menuBarPanel = $('<div></div>'); $("#header").after(ui.menuBarPanel);
+    ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
+    ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
     
+    resize();
+
     ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
     ui.processWidget = new ProcessWidget(ui.processPanel);
     ui.historyWidget = new HistoryWidget(ui.historyPanel);
     ui.dataTableView = new DataTableView(ui.viewPanel);
-    ui.menuBar = new MenuBar(ui.menuBarPanel);
+    
+    $(window).bind("resize", resizeAll);
+}
+
+function resize() {
+    var header = $("#header");
+    var footer = $("#footer");
+    
+    ui.menuBarContainer.css("top", header.outerHeight() + "px");
+
+    var facetPanelWidth = 250;
+    var width = $(window).width();
+    var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
+    var height = footer.offset().top - top;
+    
+    ui.viewPanel
+        .css("top", top + "px")
+        .css("height", height + "px")
+        .css("left", "0px")
+        .css("width", (width - facetPanelWidth) + "px");
+        
+    ui.facetPanel
+        .css("top", top + "px")
+        .css("height", height + "px")
+        .css("left", (width - facetPanelWidth) + "px")
+        .css("width", facetPanelWidth + "px");
+}
+
+function resizeAll() {
+    resize();
+    
+    ui.menuBar.resize();
+    ui.browsingEngine.resize();
+    ui.processWidget.resize();
+    ui.historyWidget.resize();
+    ui.dataTableView.resize();
 }
 
 Gridworks.reinitializeProjectData = function(f) {
diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index 240e72f57..c8830341e 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/src/main/webapp/scripts/project/browsing-engine.js
@@ -28,6 +28,9 @@ function BrowsingEngine(div, facetConfigs) {
     }
 }
 
+BrowsingEngine.prototype.resize = function() {
+};
+
 BrowsingEngine.prototype.getFacetUIStates = function() {
     var f = [];
     for (var i = 0; i < this._facets.length; i++) {
diff --git a/src/main/webapp/scripts/project/history-widget.js b/src/main/webapp/scripts/project/history-widget.js
index 0b7ae3f40..6c0727bd9 100644
--- a/src/main/webapp/scripts/project/history-widget.js
+++ b/src/main/webapp/scripts/project/history-widget.js
@@ -3,6 +3,9 @@ function HistoryWidget(div) {
     this.update();
 }
 
+HistoryWidget.prototype.resize = function() {
+};
+
 HistoryWidget.prototype.update = function(onDone) {
     var self = this;
     Ajax.chainGetJSON(
diff --git a/src/main/webapp/scripts/project/menu-bar.js b/src/main/webapp/scripts/project/menu-bar.js
index 15b6fd95f..9d323d2e6 100644
--- a/src/main/webapp/scripts/project/menu-bar.js
+++ b/src/main/webapp/scripts/project/menu-bar.js
@@ -3,6 +3,9 @@ function MenuBar(div) {
     this._initializeUI();
 }
 
+MenuBar.prototype.resize = function() {
+};
+
 MenuBar.prototype._initializeUI = function() {
     this._mode = "inactive";
     this._menuItemRecords = [];
diff --git a/src/main/webapp/scripts/project/process-widget.js b/src/main/webapp/scripts/project/process-widget.js
index e6f165ab5..aa1438284 100644
--- a/src/main/webapp/scripts/project/process-widget.js
+++ b/src/main/webapp/scripts/project/process-widget.js
@@ -9,6 +9,9 @@ function ProcessWidget(div) {
     this.update({});
 }
 
+ProcessWidget.prototype.resize = function() {
+};
+
 ProcessWidget.prototype.update = function(updateOptions, onDone) {
     for (var n in updateOptions) {
         if (updateOptions.hasOwnProperty(n)) {
diff --git a/src/main/webapp/scripts/util/menu.js b/src/main/webapp/scripts/util/menu.js
index a88ef4e6b..bc5e9fd0e 100644
--- a/src/main/webapp/scripts/util/menu.js
+++ b/src/main/webapp/scripts/util/menu.js
@@ -51,8 +51,8 @@ MenuSystem.createMenuItem = function() {
 
 MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
     var offset = elmt.offset();
-    var windowWidth = $(document.body).innerWidth();
-    var windowHeight = $(document.body).innerHeight();
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
     
     if (offset.top + elmt.outerHeight() - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
         menu.css("top", (offset.top - menu.outerHeight()) + "px");
@@ -69,8 +69,8 @@ MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
 
 MenuSystem.positionMenuLeftRight = function(menu, elmt) {
     var offset = elmt.offset();
-    var windowWidth = $(document.body).innerWidth();
-    var windowHeight = $(document.body).innerHeight();
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
     
     if (offset.top - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
         menu.css("top", (offset.top + elmt.outerHeight() - menu.outerHeight()) + "px");
diff --git a/src/main/webapp/scripts/views/data-table-view.js b/src/main/webapp/scripts/views/data-table-view.js
index 13264442d..a25636f6a 100644
--- a/src/main/webapp/scripts/views/data-table-view.js
+++ b/src/main/webapp/scripts/views/data-table-view.js
@@ -4,18 +4,15 @@ function DataTableView(div) {
     this._showRecon = true;
     this._collapsedColumnNames = {};
     
-    this._initializeUI();
     this._showRows(0);
 }
 
-DataTableView.prototype._initializeUI = function() {
-    this._div.addClass("view-panel");
+DataTableView.prototype.resize = function() {
+    var topHeight = this._div.find(".viewPanel-summary").outerHeight(true) + this._div.find(".viewPanel-pagingControls").outerHeight(true);
     
-    var self = this;
-    $(window).resize(function() {
-        var dataTableContainer = self._div.find(".data-table-container");
-        dataTableContainer.hide().width(self._div.width() + "px").show();
-    });
+    this._div.find(".data-table-container")
+        .css("height", (this._div.innerHeight() - topHeight - 1) + "px")
+        .css("display", "block");
 };
 
 DataTableView.prototype.update = function(onDone) {
@@ -24,18 +21,29 @@ DataTableView.prototype.update = function(onDone) {
 
 DataTableView.prototype.render = function() {
     var self = this;
-    var container = this._div;
     
-    var scrollLeft = 0;
-    var oldTableDiv = container.find(".data-table-container");
-    if (oldTableDiv.length > 0) {
-        scrollLeft = oldTableDiv[0].scrollLeft;
-    }
+    var oldTableDiv = this._div.find(".data-table-container");
+    var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
     
-    container.empty();
+    var html = $(
+        '<div bind="summaryDiv" class="viewPanel-summary"></div>' +
+        '<table bind="pagingControls" width="100%" class="viewPanel-pagingControls"><tr><td align="right"></td><td align="right"></td></tr></table>' +
+        '<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
+    );
+    var elmts = DOM.bind(html);
     
-    var divSummary = $('<div></div>').addClass("viewPanel-summary").appendTo(container);
+    this._renderSummaryText(elmts.summaryDiv);
+    this._renderPagingControls(elmts.pagingControls[0]);
+    this._renderDataTable(elmts.table[0]);
     
+    this._div.empty().append(html);
+    
+    this.resize();
+        
+    elmts.dataTableContainer[0].scrollLeft = scrollLeft;
+};
+
+DataTableView.prototype._renderSummaryText = function(elmt) {
     var summaryText;
     
     var from = (theProject.rowModel.start + 1);
@@ -46,15 +54,14 @@ DataTableView.prototype.render = function() {
         summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + 
             (theProject.rowModel.filtered) + '</span> rows (filtered from ' + (theProject.rowModel.total) + ' rows total)';
     }
-    $('<span>').html(summaryText).appendTo(divSummary);
+    $('<span>').html(summaryText).appendTo(elmt);
+};
+
+DataTableView.prototype._renderPagingControls = function(table) {
+    var self = this;
     
-    /*
-     *  Paging controls
-     */
-    
-    var pagingControls = $('<table width="100%"><tr><td align="right"></td><td align="right"></td></tr></table>').addClass("viewPanel-pagingControls").appendTo(container);
-    var pagingControls0 = pagingControls[0].rows[0].cells[0];
-    var pagingControls1 = pagingControls[0].rows[0].cells[1];
+    var pagingControls0 = table.rows[0].cells[0];
+    var pagingControls1 = table.rows[0].cells[1];
     
     var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls0);
     var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls0);
@@ -93,20 +100,10 @@ DataTableView.prototype.render = function() {
     for (var i = 0; i < sizes.length; i++) {
         renderPageSize(i);
     }
-    
-    /*============================================================
-     *  Data Table
-     *============================================================
-     */
-    var tableDiv = $('<div></div>')
-        .addClass("data-table-container")
-        .css("width", container.width() + "px")
-        .appendTo(container);
-    
-    var table = document.createElement("table");
-    $(table)
-        .attr("cellspacing", "0")
-        .addClass("data-table");
+};
+
+DataTableView.prototype._renderDataTable = function(table) {
+    var self = this;
     
     var columns = theProject.columnModel.columns;
     var columnGroups = theProject.columnModel.columnGroups;
@@ -288,13 +285,6 @@ DataTableView.prototype.render = function() {
         }
         renderRow(tr, r, row, even);
     }
-    
-    /*
-     *  Finally, inject the table into the DOM
-     */
-    $(table).appendTo(tableDiv);
-    
-    tableDiv[0].scrollLeft = scrollLeft;
 };
 
 DataTableView.prototype._showRows = function(start, onDone) {
diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css
index 8d591439b..3a9dbbab6 100644
--- a/src/main/webapp/styles/project.css
+++ b/src/main/webapp/styles/project.css
@@ -1,11 +1,39 @@
 #body {
-    padding: 20px;
+    padding: 0;
+    margin: 0;
 }
 
 #loading-message {
     text-align: center;
     font-size: 300%;
     color: #faa;
-    margin: 1in;
+    padding: 1in;
     font-style: italic;
 }
+
+#footer {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    z-index: 1000;
+    background: #eee;
+}
+
+.menu-bar-container {
+    position: fixed;
+    left: 0px;
+    width: 100%;
+}
+
+.view-panel {
+    position: fixed;
+    background: white;
+    overflow: hidden;
+}
+
+.facet-panel {
+    position: fixed;
+    background: white;
+    overflow: auto;
+}
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 6aef30821..a0153969d 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/src/main/webapp/styles/project/browsing.css
@@ -1,21 +1,18 @@
-.browsing-panel {
-}
 .browsing-panel-indicator {
-    clear: both;
     display: none;
-    margin: 1em;
+    margin: 0 1em;
+    margin-top: 50px;
     text-align: center;
 }
 .browsing-panel-controls {
-    clear: both;
     display: none;
-    margin: 1em;
+    margin: 0 1em;
+    margin-top: 50px;
     text-align: center;
 }
 
 ul.facets-container {
-    margin: 0;
-    padding: 0;
+    padding: 0 1em;
 }
 
 li.facet-container {
diff --git a/src/main/webapp/styles/project/process.css b/src/main/webapp/styles/project/process.css
index e2d7749fc..4e0da563a 100644
--- a/src/main/webapp/styles/project/process.css
+++ b/src/main/webapp/styles/project/process.css
@@ -1,8 +1,9 @@
 .process-panel {
-    position: absolute;
+    position: fixed;
     top: -1px;
     width: 100%;
     text-align: center;
+    z-index: 1000;
 }
 
 .process-panel-inner {
diff --git a/src/main/webapp/styles/views/data-table-view.css b/src/main/webapp/styles/views/data-table-view.css
index e1eae5e12..0dc0b1efc 100644
--- a/src/main/webapp/styles/views/data-table-view.css
+++ b/src/main/webapp/styles/views/data-table-view.css
@@ -1,11 +1,12 @@
-.view-panel {
-}
 .data-table-container {
     border: 1px solid #ccc;
-    overflow-x: auto;
+    overflow: auto;
 }
 
 table.data-table {
+    margin: 0px;
+    padding: 0px;
+    border-collapse: collapse;
 }
 
 table.data-table > tbody > tr > td {
@@ -81,6 +82,7 @@ a.column-header-menu:hover {
 
 
 .viewPanel-summary {
+    margin: 1em 2em 0em 2em;
 }
 .viewPanel-summary-row-count {
     font-size: 150%;
@@ -89,7 +91,9 @@ a.column-header-menu:hover {
 
 .viewPanel-pagingControls {
     text-align: center;
-    margin: 1em 0;
+}
+.viewPanel-pagingControls td {
+    padding: 1em 2em;
 }
 
 div.data-table-cell-content {