| OLD | NEW | 
 | (Empty) | 
|    1 <!doctype html> |  | 
|    2  |  | 
|    3  <style> |  | 
|    4     .test_paragraph { |  | 
|    5         margin-top: 1em; |  | 
|    6         margin-bottom: 1em; |  | 
|    7         text-align: justify; |  | 
|    8         font-size: 10px; |  | 
|    9         font-family: Ahem; |  | 
|   10         -webkit-font-smoothing: none; |  | 
|   11     } |  | 
|   12  |  | 
|   13     #top_paragraph { |  | 
|   14         margin-top: 1em; |  | 
|   15         margin-bottom: 1em; |  | 
|   16     } |  | 
|   17  |  | 
|   18     #region1 { |  | 
|   19         border: 1px solid black; |  | 
|   20         width: 390px; |  | 
|   21         height: 90px; |  | 
|   22         padding: 5px; |  | 
|   23     } |  | 
|   24      |  | 
|   25     #first-box1 { |  | 
|   26         border: 1px solid blue; |  | 
|   27         border-bottom: none; |  | 
|   28     } |  | 
|   29      |  | 
|   30     #second-box1 { |  | 
|   31         margin:10px; |  | 
|   32         border: 1px solid green; |  | 
|   33         border-bottom: none; |  | 
|   34         width: 366px; |  | 
|   35         height: 83px; |  | 
|   36     } |  | 
|   37  |  | 
|   38     #region2 { |  | 
|   39         border: 1px solid black; |  | 
|   40         width: 290px; |  | 
|   41         height: 110px; |  | 
|   42         padding: 5px; |  | 
|   43     } |  | 
|   44      |  | 
|   45     #first-box2 { |  | 
|   46         border: 1px solid blue; |  | 
|   47         border-top: none; |  | 
|   48         border-bottom: none; |  | 
|   49     } |  | 
|   50      |  | 
|   51     #second-box2 { |  | 
|   52         margin-left:10px; |  | 
|   53         margin-top: -5px; |  | 
|   54         padding: 0px; |  | 
|   55         border: 1px solid green; |  | 
|   56         border-top: none; |  | 
|   57         border-bottom: none; |  | 
|   58         width: 266px; |  | 
|   59         height: 120px; |  | 
|   60     } |  | 
|   61  |  | 
|   62     #first-paragraph3 { |  | 
|   63         margin-top: 0px; |  | 
|   64     } |  | 
|   65  |  | 
|   66     #region3 { |  | 
|   67         border: 1px solid black; |  | 
|   68         width: 390px; |  | 
|   69         height: 290px; |  | 
|   70         padding: 5px; |  | 
|   71     } |  | 
|   72      |  | 
|   73     #first-box3 { |  | 
|   74         border: 1px solid blue; |  | 
|   75         border-top: none; |  | 
|   76     } |  | 
|   77      |  | 
|   78     #second-box3 { |  | 
|   79         margin:10px; |  | 
|   80         margin-top: -5px; |  | 
|   81         border: 1px solid green; |  | 
|   82         border-top: none; |  | 
|   83         width: 366px; |  | 
|   84     } |  | 
|   85  |  | 
|   86     #imgFloat1 { |  | 
|   87         float: left; |  | 
|   88         background-color:green; |  | 
|   89         width: 130px; |  | 
|   90         height: 110px; |  | 
|   91     } |  | 
|   92  |  | 
|   93     #imgFloat2 { |  | 
|   94         float: right; |  | 
|   95         background-color:yellow; |  | 
|   96         width: 130px; |  | 
|   97         height: 130px; |  | 
|   98     } |  | 
|   99 </style> |  | 
|  100  |  | 
|  101 <div id="top_paragraph">In the example below, the first float pushes content int
     o region #2, and the second float pushes both floats into region #3.</div> |  | 
|  102  |  | 
|  103 <div id="content"> |  | 
|  104     <div id="region1"> |  | 
|  105         <div id="first-box1"> |  | 
|  106             <div id="second-box1"></div> |  | 
|  107         </div> |  | 
|  108     </div> |  | 
|  109      |  | 
|  110     <div id="region2"> |  | 
|  111         <div id="first-box2"> |  | 
|  112             <div id="second-box2"></div> |  | 
|  113         </div> |  | 
|  114     </div> |  | 
|  115  |  | 
|  116     <div id="region3"> |  | 
|  117         <div id="first-box3"> |  | 
|  118             <div id="second-box3"> |  | 
|  119                 <div class="test_paragraph" id="first-paragraph3">This <img id="
     imgFloat1"><img id="imgFloat2">line of text should not get out of the region. Th
     is line of text should not get out of the region. This line of text should not g
     et out of the region. This line of text should not get out of the region.</div> |  | 
|  120                 <div class="test_paragraph" id="second-paragraph3">This line of 
     text should not get out of the region. This line of text should not get out of t
     he region. This line of text should not get out of the region. This line of text
      should not get out of the region.</div> |  | 
|  121                 <div class="test_paragraph">This line of text should not get out
      of the region.</div> |  | 
|  122             </div> |  | 
|  123         </div> |  | 
|  124     </div> |  | 
|  125 </div> |  | 
| OLD | NEW |