diff --git a/ui/src/chronograf/containers/Header.js b/ui/src/chronograf/containers/Header.js
index b4edf72c8..cdc8207be 100644
--- a/ui/src/chronograf/containers/Header.js
+++ b/ui/src/chronograf/containers/Header.js
@@ -108,26 +108,28 @@ const Header = React.createClass({
       {text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal},
     ];
     return (
-      <div className="page-header data-explorer__header">
-        <div className="page-header__left">
-          <h1 className="dropdown-title">Exploration:</h1>
-          <Dropdown
-            className="sessions-dropdown"
-            items={dropdownItems}
-            actions={dropdownActions}
-            onChoose={this.handleChooseExplorer}
-            selected={this.getName(selectedExplorer)}
-          />
-          <div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
-        </div>
-        <div className="page-header__right">
-          <h1>Source:</h1>
-          <div className="source-indicator">
-            <span className="icon cpu"></span>
-            {this.context.source.name}
+      <div className="page-header">
+        <div className="page-header__container">
+          <div className="page-header__left">
+            <h1 className="dropdown-title">Exploration:</h1>
+            <Dropdown
+              className="sessions-dropdown"
+              items={dropdownItems}
+              actions={dropdownActions}
+              onChoose={this.handleChooseExplorer}
+              selected={this.getName(selectedExplorer)}
+            />
+            <div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
+          </div>
+          <div className="page-header__right">
+            <h1>Source:</h1>
+            <div className="source-indicator">
+              <span className="icon cpu"></span>
+              {this.context.source.name}
+            </div>
+            <h1>Range:</h1>
+            <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
           </div>
-          <h1>Range:</h1>
-          <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
         </div>
         <DeleteExplorerModal onConfirm={this.confirmDeleteExplorer} />
         <EditExplorerModal onConfirm={this.confirmEditExplorer} />
diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js
index f1535348f..223402d58 100644
--- a/ui/src/shared/components/ResizeContainer.js
+++ b/ui/src/shared/components/ResizeContainer.js
@@ -62,7 +62,7 @@ const ResizeContainer = React.createClass({
     const handle = <ResizeHandle isDragging={isDragging} onHandleStartDrag={this.handleStartDrag} />;
 
     return (
-      <div className="resize-container main-content" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
+      <div className="resize-container page-contents" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
         {left}
         {handle}
         {right}
diff --git a/ui/src/style/chronograf/layout/_main.scss b/ui/src/style/chronograf/layout/_main.scss
index fe162cf09..30f6534e1 100644
--- a/ui/src/style/chronograf/layout/_main.scss
+++ b/ui/src/style/chronograf/layout/_main.scss
@@ -13,50 +13,20 @@
   left: 0;
   background-color: $g1-raven;
 
-  &__header {
-    margin-bottom: 0;
-    background-color: $g0-obsidian;
-    color: $g15-platinum;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+  .page-header {
     padding-left: $explorer-page-padding;
-    padding-right: $explorer-page-padding;
-    justify-content: space-between;
+    padding-right: ($explorer-page-padding + $scrollbar-width);
   }
-
-  &-container {
-    height: 100%;
-    position: absolute;
-    width: 100%;
-  }
-
-  .controls {
-    padding: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  /* Sessions Dropdown Styles */
-  .chronograf-header__left {
-    flex-direction: row;
-    align-items: center;
-  }
-  .dropdown-title {
-    white-space: nowrap;
+  .page-header__container {
+    max-width: 100%;
   }
 }
 
-.main-content {
+.resize-container.page-contents {
+  overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  position: absolute;
-  left: 0;
-  top: $chronograf-page-header-height;
-  height: calc(100% - #{$chronograf-page-header-height});
-  width: 100%;
 }
 
 .panels {