| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <style> |   2 <style> | 
|   3     div.columns { |   3     div.columns { | 
|   4         height: 50px; |   4         height: 50px; | 
|   5         width: 110px; |   5         width: 110px; | 
|   6         margin: 10px 0; |   6         margin: 10px 0; | 
|   7         padding: 10px; |   7         padding: 10px; | 
|   8         border: solid black; |   8         border: solid black; | 
|   9         font-family: Ahem; |   9         font-family: Ahem; | 
|  10         font-size: 25px; |  10         font-size: 25px; | 
|  11         color: lightblue; |  11         color: lightblue; | 
|  12         display: inline-block; |  12         display: inline-block; | 
|  13         vertical-align: bottom; |  13         vertical-align: bottom; | 
|  14         position: relative; |  14         position: relative; | 
|  15     } |  15     } | 
|  16  |  16  | 
|  17     .column { |  17     .column { | 
|  18         position: absolute; |  18         position: absolute; | 
|  19         width: 50px; |  19         width: 25px; | 
|  20     } |  20     } | 
|  21  |  21  | 
|  22     .left { left: 10px; } |  22     .first { right: 10px; } | 
|  23     .right { right: 10px; } |  23     .second { right: 70px; } | 
|  24  |  24  | 
|  25     .column > span { |  25     .column > span { | 
|  26         background-color: lightblue; |  26         background-color: lightblue; | 
|  27         display: block; |  27         display: block; | 
|  28         width: 25px; |  28         width: 25px; | 
|  29         height: 25px; |  29         height: 25px; | 
|  30         border: solid dodgerblue; |  30         border: solid dodgerblue; | 
|  31         box-sizing: border-box; |  31         box-sizing: border-box; | 
|  32     } |  32     } | 
|  33  |  33  | 
|  34     .special > .left > span { |  34     .special > .first > span { | 
|  35         margin-top: 40px; |  35         margin-top: 40px; | 
|  36         height: 10px; |  36         height: 10px; | 
|  37         border: none; |  37         border: none; | 
|  38     } |  38     } | 
|  39     .special > .right span:first-child { |  39     .special > .second span:first-child { | 
|  40         border-bottom: none; |  40         border-bottom: none; | 
|  41         height: 10px; |  41         height: 10px; | 
|  42         margin-top: -10px; |  42         margin-top: -10px; | 
|  43         background-color: white; |  43         background-color: white; | 
|  44     } |  44     } | 
|  45     .special > .right span:last-child { |  45     .special > .second span:last-child { | 
|  46         border-top: none; |  46         border-top: none; | 
|  47         height: 15px; |  47         height: 15px; | 
|  48     } |  48     } | 
|  49 </style> |  49 </style> | 
|  50 <p> |  50 <p> | 
|  51     The blue borders should coincide with light blue squares, like this: |  51     The blue borders should coincide with light blue squares, like this: | 
|  52     <span style="display: inline-block; background-color: lightblue; border: sol
    id dodgerblue; width: 19px; height: 19px;"></span>. |  52     <span style="display: inline-block; background-color: lightblue; border: sol
    id dodgerblue; width: 19px; height: 19px;"></span>. | 
|  53     There should be none of this: |  53     There should be none of this: | 
|  54     <span style="display: inline-block; background-color: lightblue; width: 25px
    ; height: 25px;"></span> |  54     <span style="display: inline-block; background-color: lightblue; width: 25px
    ; height: 25px;"></span> | 
|  55     or this: |  55     or this: | 
|  56     <span style="display: inline-block; border: solid dodgerblue; width: 19px; h
    eight: 19px;"></span>. |  56     <span style="display: inline-block; border: solid dodgerblue; width: 19px; h
    eight: 19px;"></span>. | 
|  57 </p> |  57 </p> | 
|  58 <div class="columns"> |  58 <div class="columns"> | 
|  59     <div class="column left"><br><span></span></div> |  59     <div class="column first"><br><span></span></div> | 
|  60     <div class="column right"><span></span><span></span></div> |  60     <div class="column second"><span></span><span></span></div> | 
|  61 </div> |  61 </div> | 
|  62 <div class="columns"> |  62 <div class="columns"> | 
|  63     <div class="column left"><br><span></span></div> |  63     <div class="column first"><br><span></span></div> | 
|  64     <div class="column right"><span></span><span></span></div> |  64     <div class="column second"><span></span><span></span></div> | 
|  65 </div> |  65 </div> | 
|  66 <div class="columns"> |  66 <div class="columns"> | 
|  67     <div class="column left"><br><span></span></div> |  67     <div class="column first"><br><span></span></div> | 
|  68     <div class="column right"><span></span><span></span></div> |  68     <div class="column second"><span></span><span></span></div> | 
|  69 </div> |  69 </div> | 
|  70 <div class="columns"> |  70 <div class="columns"> | 
|  71     <div class="column left"></div> |  71     <div class="column first"></div> | 
|  72     <div class="column right"><span></span><span></span></div> |  72     <div class="column second"><span></span><span></span></div> | 
|  73 </div> |  73 </div> | 
|  74 <div class="columns"> |  74 <div class="columns"> | 
|  75     <div class="column right"><span></span></div> |  75     <div class="column second"><span></span></div> | 
|  76 </div> |  76 </div> | 
|  77 <div class="columns"> |  77 <div class="columns"> | 
|  78     <div class="column right"><span></span></div> |  78     <div class="column second"><span></span></div> | 
|  79 </div> |  79 </div> | 
|  80 <p> |  80 <p> | 
|  81     Except here, where the blue border should be around the bigger slice of the 
    blue square, on the right. |  81     Except here, where the blue border should be around the bigger slice of the 
    blue square, on the left. | 
|  82 </p> |  82 </p> | 
|  83 <div class="columns special"> |  83 <div class="columns special"> | 
|  84     <div class="column left"><span></span></div> |  84     <div class="column first"><span></span></div> | 
|  85     <div class="column right"><span></span><span></span></div> |  85     <div class="column second"><span></span><span></span></div> | 
|  86 </div> |  86 </div> | 
| OLD | NEW |