| <!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: 50px; |
| } |
| |
| .left { left: 10px; } |
| .right { right: 10px; } |
| |
| .column > span { |
| background-color: lightblue; |
| display: block; |
| width: 25px; |
| height: 25px; |
| border: solid dodgerblue; |
| box-sizing: border-box; |
| } |
| </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 left"><br><span></span></div> |
| <div class="column right"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column left"><br><span></span></div> |
| <div class="column right"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column left"><br><span></span></div> |
| <div class="column right"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column left"></div> |
| <div class="column right"><span></span><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column right"><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column right"><span></span></div> |
| </div> |
| <div class="columns"> |
| <div class="column left"><br><span></span></div> |
| <div class="column right"><span></span></div> |
| </div> |
