| OLD | NEW | 
| (Empty) |  | 
 |   1 <!DOCTYPE html> | 
 |   2 <style> | 
 |   3     .multicol { | 
 |   4         width: 500px; | 
 |   5         height: 200px; | 
 |   6         border: 3px solid black; | 
 |   7         -webkit-column-gap: 10px; | 
 |   8         -webkit-column-count: 3; | 
 |   9         line-height: 20px; | 
 |  10     } | 
 |  11     .left, .right { | 
 |  12         padding: 10px 0; | 
 |  13         width: 40px; | 
 |  14         text-align: center; | 
 |  15         box-sizing: border-box; | 
 |  16     } | 
 |  17     .left { float: left; } | 
 |  18     .right { float: right; } | 
 |  19     .tall { height: 220px; } | 
 |  20     .xtall { height: 420px; } | 
 |  21     .blue1 { background-color: skyblue; } | 
 |  22     .blue2 { background-color: dodgerblue; } | 
 |  23     .blue3 { background-color: steelblue; } | 
 |  24 </style> | 
 |  25  | 
 |  26 <p>There should be three tall floats, each of which should extend | 
 |  27    into the next column (F2, F3) or into all columns (F1).</p> | 
 |  28 <div class="multicol"> | 
 |  29     First<br> | 
 |  30     First<br> | 
 |  31     <div class="right tall blue1">F2</div> | 
 |  32     First<br> | 
 |  33     First<br> | 
 |  34     <div class="left xtall blue2">F1</div> | 
 |  35     First<br> | 
 |  36     First<br> | 
 |  37     First<br> | 
 |  38     First<br> | 
 |  39     First<br> | 
 |  40     First<br> | 
 |  41  | 
 |  42     Second<br> | 
 |  43     Second<br> | 
 |  44     <div class="left tall blue3">F3</div> | 
 |  45     Second<br> | 
 |  46     Second<br> | 
 |  47     Second<br> | 
 |  48     Second<br> | 
 |  49     Second<br> | 
 |  50     Second<br> | 
 |  51     Second<br> | 
 |  52  | 
 |  53     Third<br> | 
 |  54     Third<br> | 
 |  55     Third<br> | 
 |  56     Third<br> | 
 |  57     Third<br> | 
 |  58     Third<br> | 
 |  59     Third<br> | 
 |  60     Third<br> | 
 |  61     Third<br> | 
 |  62     Third<br> | 
 |  63 </div> | 
| OLD | NEW |