Sync Promo: Fix up focus.

chrome/browser/resources/sync_promo/sync_promo.css

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 html {
   font-family: segoe ui, arial, helvetica, sans-serif;
   font-size: 13px;
   height: 100%;
 }
 
 body {
   background-image: -webkit-linear-gradient(
       rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.04));
 }
 
 #sync-setup-overlay {
   background-color: transparent;
   width: 100%;
 }
 
 #sync-setup-login {
   margin: 0 auto;
   max-width: 900px;
   min-width: 830px;
   width: auto;
+  position: relative;
+}
+
+#sync-setup-login > div:first-of-type {
+  position: relative;
+}
+
+/* Clearfix wrapper around the promo information and login. */

[Evan Stade, 2011/12/05 02:23:37]

i don't remember what this is and it's not described anywhere (comment in code,
description in cl, etc.)

[Dan Beam, 2011/12/05 16:45:41]

In standard browsers if you float: [ left | right ]; an element it removes that
element's height from the render tree's calculations (i.e. there's no
particularly easy way to make something with variable height assume the correct
amount of space on the page).  Adding an :after {} rule with a block level
element returns variable height to that node (which we need in the case of the
login box, as it can have an error, no error, or recapthca) and essentially
fixes this problem and doesn't require any more markup / logic.

http://www.positioniseverything.net/easyclearing.html

I thought this was a pretty widespread terminology, but I guess I should leave a
better description in the comment?

+#sync-setup-login > div:first-of-type::after {
+  content: " ";
+  display: block;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  width: 100%;
 }
 
 #sync-setup-configure {
   background-color: transparent;
   margin-left: auto;
   margin-right: auto;
   width: 600px;
 }
 
 #sync-setup-login-promo-column {
-  margin-right: 385px;
+  left: 0;
+  position: absolute;
+  width: 444px;
 }
 
 html[dir='rtl'] #sync-setup-login-promo-column {
-  margin-left: 385px;
-  margin-right: 0;
+  left: auto;
+  right: 0;
 }
 
 #sync-setup-login-content-column {
   float: right;
   width: 335px;
 }
 
 html[dir='rtl'] #sync-setup-login-content-column {
   float: left;
 }
@@ skipping 68 matching lines @@
 #promo-info-pane > * {
   -webkit-transition: opacity 200ms linear;
   opacity: 1;
   position: absolute;
 }
 
 #promo-info-pane > [hidden] {
   display: inline-block; /* Override default user-agent styles. */
   opacity: 0;
 }