diff --git a/demos/blocklyfactory/app_controller.js b/demos/blocklyfactory/app_controller.js
index 53eaa9857..082987d03 100644
--- a/demos/blocklyfactory/app_controller.js
+++ b/demos/blocklyfactory/app_controller.js
@@ -306,9 +306,11 @@ AppController.prototype.onTab = function() {
       this.selectedTab == AppController.WORKSPACE_FACTORY;
 
   if (this.selectedTab == AppController.EXPORTER) {
-    // Show container of exporter.
-    FactoryUtils.show('blockLibraryExporter');
+    // Hide other tabs.
     FactoryUtils.hide('workspaceFactoryContent');
+    FactoryUtils.hide('blockFactoryContent');
+    // Show exporter tab.
+    FactoryUtils.show('blockLibraryExporter');
 
     // Need accurate state in order to know which blocks are used in workspace
     // factory.
@@ -325,13 +327,16 @@ AppController.prototype.onTab = function() {
     this.exporter.updatePreview();
 
   } else if (this.selectedTab ==  AppController.BLOCK_FACTORY) {
-    // Hide container of exporter.
+    // Hide other tabs.
     FactoryUtils.hide('blockLibraryExporter');
     FactoryUtils.hide('workspaceFactoryContent');
+    // Show Block Factory.
+    FactoryUtils.show('blockFactoryContent');
 
   } else if (this.selectedTab == AppController.WORKSPACE_FACTORY) {
-    // Hide container of exporter.
+    // Hide other tabs.
     FactoryUtils.hide('blockLibraryExporter');
+    FactoryUtils.hide('blockFactoryContent');
     // Show workspace factory container.
     FactoryUtils.show('workspaceFactoryContent');
     // Update block library category.
@@ -566,22 +571,25 @@ AppController.prototype.initializeBlocklyStorage = function() {
  * Handle resizing of elements.
  */
 AppController.prototype.onresize = function(event) {
-  // Handle resizing of Block Factory elements.
-  var expandList = [
-    document.getElementById('blockly'),
-    document.getElementById('blocklyMask'),
-    document.getElementById('preview'),
-    document.getElementById('languagePre'),
-    document.getElementById('languageTA'),
-    document.getElementById('generatorPre')
-  ];
-  for (var i = 0, expand; expand = expandList[i]; i++) {
-    expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px';
-    expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px';
+  if (this.selectedTab == AppController.BLOCK_FACTORY) {
+    // Handle resizing of Block Factory elements.
+    var expandList = [
+      document.getElementById('blocklyPreviewContainer'),
+      document.getElementById('blockly'),
+      document.getElementById('blocklyMask'),
+      document.getElementById('preview'),
+      document.getElementById('languagePre'),
+      document.getElementById('languageTA'),
+      document.getElementById('generatorPre'),
+    ];
+    for (var i = 0, expand; expand = expandList[i]; i++) {
+      expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px';
+      expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px';
+    }
+  } else if (this.selectedTab == AppController.EXPORTER) {
+    // Handle resize of Exporter block options.
+    this.exporter.view.centerPreviewBlocks();
   }
-
-  // Handle resize of Exporter block options.
-  this.exporter.view.centerPreviewBlocks();
 };
 
 /**
diff --git a/demos/blocklyfactory/factory.css b/demos/blocklyfactory/factory.css
index 810b47411..5a6600eeb 100644
--- a/demos/blocklyfactory/factory.css
+++ b/demos/blocklyfactory/factory.css
@@ -27,7 +27,7 @@ body {
   background-color: #fff;
   font-family: sans-serif;
   margin: 0 5px;
-  overflow: hidden
+  overflow: hidden;
 }
 
 h1 {
@@ -63,8 +63,13 @@ p {
   padding: 5px 0px;
 }
 
+#factoryHeader {
+  display: table;
+  height: 10%;
+}
+
 #blockly {
-  position: fixed;
+  position: absolute;
 }
 
 #blocklyMask {
@@ -133,8 +138,9 @@ button, .buttonStyle {
 }
 
 #blockFactoryContent {
-  height: 87%;
+  height: 85%;
   width: 100%;
+  overflow: hidden;
 }
 
 #blockFactoryPreview {
@@ -170,15 +176,15 @@ button, .buttonStyle {
 }
 
 #blocklyWorkspaceContainer {
-  height: 95%;
-  padding: 2px;
   width: 50%;
 }
 
 #workspaceFactoryContent {
   clear: both;
   display: none;
-  height: 100%;
+  height: 90%;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 /* Exporter */
@@ -186,7 +192,9 @@ button, .buttonStyle {
 #blockLibraryExporter {
   clear: both;
   display: none;
-  height: 100%;
+  height: 90%;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 #exportSelector {
@@ -369,17 +377,26 @@ td {
   width: 0;
   z-index: -1;
 }
+#wfactoryHeader {
+  height: 29%;
+  padding: 0.5%;
+}
 
 #workspaceTabs {
   background-color: #f8f8f8;
   border: 1px solid #ccc;
   display: table;
+  width: auto;
 }
 
 #toolbox_section {
-  height: 405px;
+  height: 85%;
   width: 60%;
-  position: relative;
+}
+
+#previewHelp {
+  padding: 10px;
+  width: 98%;
 }
 
 #toolbox_blocks {
@@ -388,34 +405,65 @@ td {
 }
 
 #preview_blocks {
-  height: 395px;
+  height: 80%;
+  padding: 10px;
   width: 100%;
 }
 
 #createDiv {
+  height: 79%;
   padding: 0.5%;
   width: 60%;
 }
 
 #previewDiv {
   border: 10px solid #eee;
+  height: 77%;
   margin-right: 0.5%;
+  padding-bottom: 10px;
   width: 35%;
 }
 
 #previewBorder {
   border: 5px solid #ddd;
-  padding: 2%;
+  height: 100%;
+  padding-right: 20px;
 }
 
-#toolbox_div, #preload_div {
+.test {
+  border: 1px solid black;
+}
+
+#toolbox_div {
+  display: table;
+  height: auto;
   margin-right: 5%;
+  overflow: hidden;
   width: 35%;
 }
 
-#workspace_options {
-  max-height: 250px;
+#preload_div {
+  display: table;
+  height: 70%;
+  margin-right: 5%;
+  max-height: 500px;
+  overflow: hidden;
   overflow-y: scroll;
+  width: 35%;
+}
+
+#shadowBlockDropdown {
+  height: 15%;
+}
+
+#preloadHelp {
+  display: table-row;
+  height: 30%;
+}
+
+#workspace_options {
+  display: table-row;
+  margin-top: 2%;
 }
 
 #disable_div {
@@ -473,7 +521,6 @@ td {
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
-  position: relative;
   display: inline-block;
 }
 
diff --git a/demos/blocklyfactory/index.html b/demos/blocklyfactory/index.html
index 237c26323..641ec2e16 100644
--- a/demos/blocklyfactory/index.html
+++ b/demos/blocklyfactory/index.html
@@ -132,7 +132,8 @@
   <!-- Workspace Factory tab -->
 
   <div id="workspaceFactoryContent">
-    <p>
+    <div id="factoryHeader">
+      <p>
         <div class="dropdown">
         <button id="button_importBlocks">Import Custom Blocks</button>
           <div id="dropdownDiv_importBlocks" class="dropdown-content">
@@ -165,22 +166,25 @@
 
         <button id="button_clear">Clear</button>
 
-    </p>
+      </p>
+    </div>
 
     <section id="createDiv">
-      <h3>Edit</h3>
-      <p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
-      <table id='workspaceTabs' style="width:auto">
+      <div id="createHeader">
+        <h3>Edit</h3>
+        <p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
+      </div>
+      <table id='workspaceTabs' style="width:auto; height:auto">
         <td id="tab_toolbox" class="tabon">Toolbox</td>
         <td id="tab_preload" class="taboff">Workspace</td>
       </table>
       <section id="toolbox_section">
-        <div id="toolbox_blocks" class="content"></div>
+        <div id="toolbox_blocks"></div>
         <div id='disable_div'></div>
       </section>
       <aside id="toolbox_div">
         <p id="categoryHeader">Your categories will appear here</p>
-        <table id="categoryTable" style="width:auto">
+        <table id="categoryTable" style="width:auto; height:auto">
         </table>
         <p>&nbsp;</p>
 
@@ -209,7 +213,7 @@
 
       </aside>
 
-      <div class='dropdown'>
+      <div id="shadowBlockDropdown" class='dropdown'>
       <button id="button_editShadow">Edit Block</button>
       <div id="dropdownDiv_editShadowAdd" class="dropdown-content">
         <a id='dropdown_addShadow'>Add Shadow</a>
@@ -220,9 +224,11 @@
       </div>
 
       <aside id='preload_div' style='display:none'>
-        <p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
-        <button class="small" id="button_standardOptions">Reset Options</button>
-        <form id="workspace_options">
+        <div id="preloadHelp">
+          <p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
+          <button class="small" id="button_standardOptions">Reset Options</button>
+        </div>
+        <div id="workspace_options">
           <input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks<br>
           <input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks<br>
           <input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS<br>
@@ -250,7 +256,7 @@
             Min Scale <input type="text" id="zoomOption_minScale_text" class="optionsInput" value="0.3"><br>
             Scale Speed <input type="text" id="zoomOption_scaleSpeed_text" class="optionsInput" value="1.2"><br>
           </div>
-        </form>
+        </div>
       </aside>
 
 
@@ -258,8 +264,10 @@
 
     <aside id="previewDiv">
       <div id="previewBorder">
-        <h3>Preview</h3>
-        <p>This is what your custom workspace will look like.</p>
+        <div id="previewHelp">
+          <h3>Preview</h3>
+          <p>This is what your custom workspace will look like.</p>
+        </div>
         <div id="preview_blocks" class="content"></div>
       </div>
     </aside>
@@ -267,7 +275,7 @@
 
   <!-- Blockly Factory Tab -->
   <table id="blockFactoryContent">
-    <tr>
+    <tr width="100%" height="10%">
       <td width="50%" height="5%">
         <table>
           <tr id="blockLibrary">
@@ -292,7 +300,7 @@
           </tr>
         </table>
       </td>
-      <td>
+      <td height="5%">
         <table id="blockFactoryPreview">
           <tr>
             <td id="previewContainer">
@@ -323,13 +331,13 @@
         </table>
       </td>
     </tr>
-    <tr>
+    <tr height="80%">
       <td id="blocklyWorkspaceContainer">
         <div id="blockly"></div>
         <div id="blocklyMask"></div>
       </td>
-      <td width="50%" height="95%">
-        <table>
+      <td width="50%">
+        <table id="blocklyPreviewContainer">
           <tr>
             <td height="30%">
               <div id="preview"></div>
@@ -372,6 +380,7 @@
           </tr>
         </table>
       </td>
+      </tr>
   </table>
 
   <xml id="blockfactory_toolbox" class="toolbox">