| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 500px; |
| height: 200px; |
| border: 3px solid black; |
| -webkit-column-gap: 10px; |
| -webkit-column-count: 3; |
| line-height: 20px; |
| } |
| .left, .right { |
| padding: 10px 0; |
| width: 40px; |
| text-align: center; |
| box-sizing: border-box; |
| } |
| .left { float: left; } |
| .right { float: right; } |
| .tall { height: 220px; } |
| .xtall { height: 420px; } |
| .blue1 { background-color: skyblue; } |
| .blue2 { background-color: dodgerblue; } |
| .blue3 { background-color: steelblue; } |
| </style> |
| |
| <p>There should be three tall floats, each of which should extend |
| into the next column (F2, F3) or into all columns (F1).</p> |
| <div class="multicol"> |
| First<br> |
| First<br> |
| <div class="right tall blue1">F2</div> |
| First<br> |
| First<br> |
| <div class="left xtall blue2">F1</div> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| |
| Second<br> |
| Second<br> |
| <div class="left tall blue3">F3</div> |
| 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> |
| Third<br> |
| Third<br> |
| </div> |
