| OLD | NEW | 
 | (Empty) | 
|   1 <!doctype html> |  | 
|   2  |  | 
|   3  <style> |  | 
|   4     #content { |  | 
|   5        -webkit-flow-into: flow1; |  | 
|   6     } |  | 
|   7      |  | 
|   8     #first-box { |  | 
|   9         margin:10%; |  | 
|  10         height:350px; |  | 
|  11         background-color:#cccccc; |  | 
|  12     } |  | 
|  13      |  | 
|  14     #second-box { |  | 
|  15         position:absolute; |  | 
|  16         top:0; |  | 
|  17         height:450px; |  | 
|  18         width:50%; |  | 
|  19         background-color:#00a000; |  | 
|  20         color:#00a000 |  | 
|  21     } |  | 
|  22      |  | 
|  23     #region1, #region2, #region3 { |  | 
|  24         border: 1px solid black; |  | 
|  25         -webkit-flow-from: flow1; |  | 
|  26     } |  | 
|  27  |  | 
|  28     #region1 { |  | 
|  29         width: 200px; |  | 
|  30         height: 150px; |  | 
|  31     } |  | 
|  32      |  | 
|  33     #region2 { |  | 
|  34         width: 300px; |  | 
|  35         height: 180px; |  | 
|  36     } |  | 
|  37      |  | 
|  38     #region3 { |  | 
|  39         width: 120px; |  | 
|  40         height: 120px; |  | 
|  41     } |  | 
|  42 </style> |  | 
|  43  |  | 
|  44 <body> |  | 
|  45 <p>The green positioned object should go through all three regions. Its left edg
    e should have the |  | 
|  46 same offset from the left side of the light grey boxes in each region.</p> |  | 
|  47  |  | 
|  48 <div id="content"> |  | 
|  49     <div id="first-box"> |  | 
|  50                 <span id="second-box"></
    span> |  | 
|  51     </div> |  | 
|  52 </div> |  | 
|  53  |  | 
|  54 <div id="container"> |  | 
|  55     <div id="region1"></div> |  | 
|  56     <div id="region2"></div> |  | 
|  57     <div id="region3"></div> |  | 
|  58 </div> |  | 
| OLD | NEW |