| OLD | NEW | 
 | (Empty) | 
|   1 <!doctype html> |  | 
|   2  |  | 
|   3  <style> |  | 
|   4  |  | 
|   5    @font-face { |  | 
|   6         font-family: webkit-ahem; |  | 
|   7         font-style: normal; |  | 
|   8         src: url(../../resources/Ahem.ttf); |  | 
|   9     } |  | 
|  10  |  | 
|  11     #content { |  | 
|  12         -webkit-flow-into: flow1; |  | 
|  13         padding: 5px; |  | 
|  14     } |  | 
|  15    |  | 
|  16     #float1 { |  | 
|  17         float: left; |  | 
|  18         width: 150px; |  | 
|  19         height: 100px; |  | 
|  20         background-color:green |  | 
|  21     } |  | 
|  22      |  | 
|  23     #float2 { |  | 
|  24         float:right; |  | 
|  25         width:200px; |  | 
|  26         height:30px; |  | 
|  27         background-color:orange |  | 
|  28     } |  | 
|  29  |  | 
|  30     #region1, #region2, #region3 { |  | 
|  31         border: 1px solid black; |  | 
|  32         -webkit-flow-from: flow1; |  | 
|  33     } |  | 
|  34  |  | 
|  35     #region1 { |  | 
|  36         width: 180px; |  | 
|  37         height: 90px; |  | 
|  38     } |  | 
|  39      |  | 
|  40     #region2 { |  | 
|  41         width: 400px; |  | 
|  42         height: 90px; |  | 
|  43     } |  | 
|  44      |  | 
|  45     #region3 { |  | 
|  46         width: 400px; |  | 
|  47         height: 90px; |  | 
|  48     } |  | 
|  49 </style> |  | 
|  50  |  | 
|  51 <p>In the example below, the green float should be at the top of the first regio
    n and on the left. It should spill into region two. |  | 
|  52 The orange float should be on the right at the top of region two.</p> |  | 
|  53  |  | 
|  54 <div id="content"> |  | 
|  55     <div id="first-box"> |  | 
|  56         <div id="second-box"> |  | 
|  57             <p><img id="float1"><img id="float2"> |  | 
|  58             <p>This line of text should not get out of the region. This line of 
    text should not get out of the region.</p> |  | 
|  59             <p>This line of text should not get out of the region. This line of 
    text should not get out of the region.</p> |  | 
|  60             <p>This line of text should not get out of the region.</p> |  | 
|  61              |  | 
|  62         </div> |  | 
|  63     </div> |  | 
|  64 </div> |  | 
|  65  |  | 
|  66 <div id="container"> |  | 
|  67     <div id="region1"></div> |  | 
|  68     <div id="region2"></div> |  | 
|  69     <div id="region3"></div> |  | 
|  70 </div> |  | 
| OLD | NEW |