Sync Promo: Fix up focus.

chrome/browser/resources/sync_promo/sync_promo.css

Index: chrome/browser/resources/sync_promo/sync_promo.css
diff --git a/chrome/browser/resources/sync_promo.css b/chrome/browser/resources/sync_promo/sync_promo.css
similarity index 85%
rename from chrome/browser/resources/sync_promo.css
rename to chrome/browser/resources/sync_promo/sync_promo.css
index a7728d54051b5cc7ea090dcc44b33cede6f0304b..8bd5f74028116015f0e5c784c14287cc0ada0f6e 100644
--- a/chrome/browser/resources/sync_promo.css
+++ b/chrome/browser/resources/sync_promo/sync_promo.css
@@ -24,6 +24,21 @@ body {
   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 {
@@ -34,12 +49,14 @@ body {
 }
 
 #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 {