| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 480px; |
| height: 200px; |
| border: 3px solid black; |
| -webkit-column-gap: 0; |
| -webkit-column-count: 3; |
| line-height: 20px; |
| } |
| .float { |
| padding: 10px; |
| background-color: skyblue; |
| } |
| .left { float: left; } |
| .right { float: right; } |
| </style> |
| |
| <p>There should be two blue floats in each of the three columns below, L's should float to the left, |
| and R's should float to the right.</p> |
| <div class="multicol"> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| <div class="float left">L1</div> |
| <div class="float right">R1</div> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| |
| <div class="float left">L2</div> |
| <div class="float right">R2</div> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| <div class="float left">L3</div> |
| <div class="float right">R3</div> |
| Third<br> |
| Third<br> |
| </div> |
