| <!DOCTYPE html> |
| <style> |
| .test { position: absolute; } |
| .pos1 { left: 50px; top: 50px;} |
| .pos2 { left: 250px; top: 50px;} |
| .pos3 { left: 50px; top: 300px;} |
| .pos4 { left: 250px; top: 300px;} |
| .multicol { |
| border: 0 solid black; |
| background-color: green; |
| width: 100px; |
| height: 100px; |
| } |
| .horizontal_bt { border-top-width: 50px; } |
| .horizontal_tb { border-bottom-width: 50px; } |
| .vertical_rl { border-left-width: 50px; } |
| .vertical_lr { border-right-width: 50px; } |
| </style> |
| <p> |
| There should be four green squares below, plus a large black border on one side, as |
| indicated. There should be no red. |
| </p> |
| <div class="test pos1"> |
| <p>Border above</p> |
| <div class="multicol horizontal_bt"></div> |
| </div> |
| <div class="test pos2"> |
| <p>Border below</p> |
| <div class="multicol horizontal_tb"></div> |
| </div> |
| <div class="test pos3"> |
| <p>Border left</p> |
| <div class="multicol vertical_rl"></div> |
| </div> |
| <div class="test pos4"> |
| <p>Border right</p> |
| <div class="multicol vertical_lr"></div> |
| </div> |
