| <!DOCTYPE html> |
| <style> |
| div.columns { |
| height: 50px; |
| width: 110px; |
| margin: 10px 0; |
| padding: 10px; |
| border: solid black; |
| font-family: Ahem; |
| font-size: 25px; |
| color: lightblue; |
| display: inline-block; |
| vertical-align: bottom; |
| position: relative; |
| } |
| |
| .column { |
| position: absolute; |
| width: 25px; |
| } |
| |
| .first { right: 10px; } |
| .second { right: 70px; } |
| |
| .column > span { |
| background-color: lightblue; |
| display: block; |
| width: 25px; |
| height: 25px; |
| border: solid dodgerblue; |
| box-sizing: border-box; |
| } |
| |
| .special > .first > span { |
| margin-top: 40px; |
| height: 10px; |
| border: none; |
| } |
| .special > .second span:first-child { |
| border-bottom: none; |
| height: 10px; |
| margin-top: -10px; |
| background-color: white; |
| } |
| .special > .second span:last-child { |
| border-top: none; |
| height: 15px; |
| } |
| </style> |
| <p> |
| The blue borders should coincide with light blue squares, like this: |
| <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>. |
| There should be none of this: |
| <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span> |
| or this: |
| <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>. |
| </p> |
| <div class="columns"> |
| <div class="column first"><br><span></span></div> |
| <div class="column second"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column first"><br><span></span></div> |
| <div class="column second"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column first"><br><span></span></div> |
| <div class="column second"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column first"></div> |
| <div class="column second"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column second"><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column second"><span></span></div> |
| </div> |
| <p> |
| Except here, where the blue border should be around the bigger slice of the blue square, on the left. |
| </p> |
| <div class="columns special"> |
| <div class="column first"><span></span></div> |
| <div class="column second"><span></span><span></span></div> |
| </div> |
