diff --git a/r2/r2/public/static/css/compact.css b/r2/r2/public/static/css/compact.css
index 94e9a9505..7392775c7 100644
--- a/r2/r2/public/static/css/compact.css
+++ b/r2/r2/public/static/css/compact.css
@@ -89,20 +89,14 @@ button.button { padding: 0 5px; }
 .unhide-icon { background-image: url("/static/compact/unhide.png"); /*SPRITE*/ }
 
 /*Toolbar*/
-#topbar { height: 45px; position: absolute; top: 0; left: 0; right: 0; background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px 10px 0px; }
-
-#header-img { width: 90px; }
-
-#topbar > h1 { color: #444; font-size: 16px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100px; margin-left: auto; margin-right: auto; margin-top: 26px; padding: 0; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; }
+#topbar { height: 45px; position: absolute; top: 0; left: 0; right: 0; background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: justify; -webkit-box-pack: justify; box-pack: justify; -moz-box-align: center; -webkit-box-align: center; box-align: center; }
+#topbar #header-img { width: 90px; }
+#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; }
 
 #topbar > h1 a { color: inherit; text-decoration: inherit; }
 
 body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
 
-#topbar > .right { position: absolute; right: 6px; bottom: 0px; padding: 0 5px; }
-
-#topbar > .left { position: absolute; bottom: 2px; padding: 0 5px; padding-left: 0px; margin-left: 5px; }
-
 #topbar > .right > .button { padding-top: 8px; padding-bottom: 3px; }
 
 #topbar > .right > .button:first-child { margin-right: 5px; }
diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss
index e486d50cf..e4058ce5a 100644
--- a/r2/r2/public/static/css/compact.scss
+++ b/r2/r2/public/static/css/compact.scss
@@ -318,29 +318,42 @@ button.button {
     @include vertical_gradient(#CEE3F8, #A8C4E0);
     border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7;
     @include box-sizing(border-box);
-    padding: 0px 10px 10px 0px;
-}
-#header-img {
-    width: 90px;
+    padding: 0px 10px; //Left and right padding
+
+    @include display-box();
+    @include box-orient(horizontal); //Horizontal spread
+    @include box-pack(justify); //Divide the space up as best we can
+    @include box-align(center); //Put everything in the middle of the box
+
     
-}
-#topbar > h1 {
-    color: #444;
-    font-size: 16px;
-    font-weight: bold;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100px;
-    margin: {
-        left: auto;
-        right: auto;
-        top: 26px;
+    #header-img {
+        width: 90px;
+
+    }
+
+    .left {
+
+    }
+
+    & > h1 {
+        color: #444;
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin: 0 10px;
+        padding: 0;
+		padding-top: 16px;
+        text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
+        @include box-flex(1); //This box will flex to fill avalible space
+    }
+    .right {
+
     }
-    padding: 0;
-    text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
 }
+
 #topbar > h1 a {
     color: inherit;
     text-decoration: inherit;
@@ -349,19 +362,7 @@ body[orient="landscape"] > #topbar > h1 {
     margin-left: -125px;
     width: 250px;
 }
-#topbar > .right  {
-    position: absolute;
-    right: 6px;
-    bottom: 0px;
-    padding: 0 5px;
-}
-#topbar > .left {
-    position: absolute;
-    bottom: 2px;
-    padding: 0 5px;
-    padding-left: 0px;
-    margin-left: 5px;
-}
+
 #topbar > .right > .button {
     padding-top: 8px; padding-bottom: 3px;
 }
diff --git a/r2/r2/templates/redditheader.compact b/r2/r2/templates/redditheader.compact
index 3a880c0a8..6168a9cea 100644
--- a/r2/r2/templates/redditheader.compact
+++ b/r2/r2/templates/redditheader.compact
@@ -38,7 +38,7 @@
     <div class="commentcount"><div class="comments"></div><div class="comments preloaded"></div></div>
 </div>
 <div id="topbar">
-  <span class="left">
+  <div class="left">
    <%
         header_title = c.site.header_title
         if c.site.header and c.allow_styles:
@@ -49,9 +49,9 @@
             header_title = d.header_title
     %>
     ${img_link(c.site.name, s3_https_if_secure(header_img), '/', _id = "header-img-a", img_id = 'header-img', title = header_title)}
-  </span>
+  </div>
   <h1>${nav}</h1>
-  <span class="right">
+  <div class="right">
     %if c.user_is_loggedin:
       <%
          if c.have_messages:
@@ -74,7 +74,7 @@
       %endif
     %endif
     <a class="topbar-options" href="#" id="topmenu_toggle"></a>
-  </span>
+  </div>
   <div id="top_menu">
     %if c.user_is_loggedin:
     <div class="menuitem">