| 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     /* Created to justify the last line of text in the div */ |  | 
|   14     #paragraph1:after { |  | 
|   15         content: " ____"; |  | 
|   16         line-height: 0; |  | 
|   17         visibility: hidden; |  | 
|   18     } |  | 
|   19      |  | 
|   20     #region1 { |  | 
|   21         border: 1px solid black; |  | 
|   22         width: 390px; |  | 
|   23         height: 80px; |  | 
|   24         padding: 5px; |  | 
|   25     } |  | 
|   26      |  | 
|   27     #first-box1 { |  | 
|   28         border: 1px solid blue; |  | 
|   29         border-bottom: none; |  | 
|   30     } |  | 
|   31      |  | 
|   32     #second-box1 { |  | 
|   33         margin:10px; |  | 
|   34         border: 1px solid green; |  | 
|   35         border-bottom: none; |  | 
|   36         width: 366px; |  | 
|   37         height: 73px; |  | 
|   38     } |  | 
|   39  |  | 
|   40     #first-paragraph2 { |  | 
|   41         margin-top: 0px; |  | 
|   42     } |  | 
|   43      |  | 
|   44     /* Created to justify the last line of text in the div */ |  | 
|   45     #second-paragraph2:after { |  | 
|   46         content: " ____"; |  | 
|   47         line-height: 0; |  | 
|   48         visibility: hidden; |  | 
|   49     } |  | 
|   50      |  | 
|   51     #region2 { |  | 
|   52         border: 1px solid black; |  | 
|   53         width: 290px; |  | 
|   54         height: 80px; |  | 
|   55         padding: 5px; |  | 
|   56     } |  | 
|   57      |  | 
|   58     #first-box2 { |  | 
|   59         border: 1px solid blue; |  | 
|   60         border-top: none; |  | 
|   61         border-bottom: none; |  | 
|   62     } |  | 
|   63      |  | 
|   64     #second-box2 { |  | 
|   65         margin-left:10px; |  | 
|   66         margin-top: -5px; |  | 
|   67         padding: 0px; |  | 
|   68         border: 1px solid green; |  | 
|   69         border-top: none; |  | 
|   70         border-bottom: none; |  | 
|   71         width: 266px; |  | 
|   72         height: 90px; |  | 
|   73     } |  | 
|   74  |  | 
|   75     #first-paragraph3 { |  | 
|   76         margin-top: 0px; |  | 
|   77     } |  | 
|   78  |  | 
|   79     #region3 { |  | 
|   80         border: 1px solid black; |  | 
|   81         width: 390px; |  | 
|   82         height: 80px; |  | 
|   83         padding: 5px; |  | 
|   84     } |  | 
|   85      |  | 
|   86     #first-box3 { |  | 
|   87         border: 1px solid blue; |  | 
|   88         border-top: none; |  | 
|   89     } |  | 
|   90      |  | 
|   91     #second-box3 { |  | 
|   92         margin:10px; |  | 
|   93         margin-top: -5px; |  | 
|   94         border: 1px solid green; |  | 
|   95         border-top: none; |  | 
|   96         width: 366px; |  | 
|   97     } |  | 
|   98  |  | 
|   99     .imgFloat { |  | 
|  100         float: right; |  | 
|  101         background-color:green; |  | 
|  102     } |  | 
|  103  |  | 
|  104     #float1 { |  | 
|  105         width: 130px; |  | 
|  106         height: 63px; |  | 
|  107     } |  | 
|  108  |  | 
|  109     #float2 { |  | 
|  110         width: 30px; |  | 
|  111         height: 37px; |  | 
|  112     } |  | 
|  113  |  | 
|  114     #imgAbsolute { |  | 
|  115         position: absolute; |  | 
|  116         background-color: green; |  | 
|  117         width: 100px; |  | 
|  118         height: 37px; |  | 
|  119         left: 292px; |  | 
|  120         top: 101px; |  | 
|  121     } |  | 
|  122 </style> |  | 
|  123  |  | 
|  124 <div id="content"> |  | 
|  125     <div id="region1"> |  | 
|  126         <div id="first-box1"> |  | 
|  127             <div id="second-box1"> |  | 
|  128                 <div class="test_paragraph" id="paragraph1">This <img class="img
     Float" id="float1" src="resources/transparent.png">line of text should not get o
     ut of the region. This line of text should not get out of the region. This line 
     of text should not</div> |  | 
|  129             </div> |  | 
|  130         </div> |  | 
|  131     </div> |  | 
|  132      |  | 
|  133     <div id="region2"> |  | 
|  134         <div id="first-box2"> |  | 
|  135             <div id="second-box2"> |  | 
|  136                 <div class="test_paragraph" id="first-paragraph2">get<img class=
     "imgFloat" id="float2" src="resources/transparent.png"> out of the region. This 
     line of text should not get out of the region.</div> |  | 
|  137                 <div class="test_paragraph" id="second-paragraph2">This line of 
     text should not get out of the region. This line of text should not get out of t
     he region.</div> |  | 
|  138             </div> |  | 
|  139         </div> |  | 
|  140     </div> |  | 
|  141  |  | 
|  142     <img id="imgAbsolute" src="resources/transparent.png"> |  | 
|  143      |  | 
|  144     <div id="region3"> |  | 
|  145         <div id="first-box3"> |  | 
|  146             <div id="second-box3"> |  | 
|  147                 <div class="test_paragraph" id="first-paragraph3">This line of t
     ext should not get out of the region. This line of text should not get out of th
     e region.</div> |  | 
|  148                 <div class="test_paragraph" id="second-paragraph3">This line of 
     text should not get out of the region.</div> |  | 
|  149             </div> |  | 
|  150         </div> |  | 
|  151     </div> |  | 
|  152 </div> |  | 
| OLD | NEW |