Layout adjustment for i18n compatibility.

chrome/browser/resources/options/options_page.css

Index: chrome/browser/resources/options/options_page.css
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 932eded11531571666521a8d0d1879901df1abf6..31bffebae5e7fb7c78115f3c455f18c2b408bae5 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -353,6 +353,12 @@ html.hide-menu #mainview {
   min-height: 192px;
 }
 
+

[Rick Byers, 2011/06/04 18:49:45]

Remove extra blank line

+/**
+ * TODO(kevers): Standardize formatting of sections to use display tables.
+ * For now, we require separate specialized rules for sections that are 
+ * formatted as table rows. 
+ */
 section {
   -webkit-box-orient: horizontal;
   border-bottom: 1px solid #eeeeee;
@@ -361,6 +367,7 @@ section {
   padding-bottom: 20px;
 }
 

[Rick Byers, 2011/06/04 18:49:45]

Remove extra blank line

+
 div.page section:last-child {
   border-bottom: none;
 }
@@ -777,3 +784,45 @@ html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled {
   display: none;
 }
+
+
+/* Display a collection of sections as a table in order to display nicely
+ * in multiple locales.  The left column should expand to accomodate the
+ * widest label without introducing excessive whitespace.  Labels in
+ * languages such as German or Dutch tend to be wider than for English 

[Rick Byers, 2011/06/04 18:49:45]

Remove trailing whitespace

+ */
+.displaytable {
+  display: table;
+  width: 100%;
+}
+
+.displaytable > section {
+  display: table-row;
+}
+
+/* left table column containing section label */
+.displaytable > section > h3 {
+  display: table-cell;
+  vertical-align: baseline;
+  font-size: 105%;
+  font-weight: bold;

[Rick Byers, 2011/06/04 18:49:45]

font-size and font-weight appear redundant with the 'section > h3' rule.  Can
you remove them so that this rule specifies only the additional changes
necessary for the table case?

+  width: 130px;
+  padding-right: 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+/* right table column containing settable options */
+.displaytable > section > h3 + div,
+.displaytable > section > h3 + table {
+  display: table-cell;

[Rick Byers, 2011/06/04 18:49:45]

You can combine all the table-cell rules (both left and right columns) together
as well to avoid repetition, eg:
.displaytable > section > * {
  display: table-cell;
  vertical-align: baseline;
}

+  vertical-align: baseline;
+  padding-top: 17px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+/* do not display a border after the last section in the table */
+.displaytable > section:last-child > h3,
+.displaytable > section:last-child > div  {
+  border-bottom: none;
+}