| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 500px; |
| height: 200px; |
| border: 3px solid black; |
| line-height: 20px; |
| } |
| .left, .right { |
| padding: 10px 0; |
| width: 40px; |
| text-align: center; |
| box-sizing: border-box; |
| } |
| .left { float: left; } |
| .right { float: right; } |
| |
| .blue1 { background-color: skyblue; } |
| .blue2 { background-color: dodgerblue; } |
| .blue3 { background-color: steelblue; } |
| |
| .column1, .column2, .column3 { |
| float: left; |
| width: 160px; |
| } |
| .column1, .column2 { |
| margin-right: 10px; |
| } |
| |
| .column1 > .f1 { height: 120px; } |
| .column1 > .f2 { height: 160px; } |
| |
| .column2 > .f1 { height: 200px; } |
| .column2 > .f2 { height: 60px; } |
| .column2 > .f3 { height: 160px; } |
| |
| .column3 > .f1 { height: 100px; } |
| .column3 > .f3 { height: 60px; } |
| |
| </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"> |
| <div class="column1"> |
| First<br> |
| First<br> |
| <div class="right blue1 f2">F2</div> |
| First<br> |
| First<br> |
| <div class="left blue2 f1">F1</div> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| </div> |
| |
| <div class="column2"> |
| <div class="right blue1 f2"></div> |
| <div class="left blue2 f1"></div> |
| Second<br> |
| Second<br> |
| <div class="left blue3 f3">F3</div> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| </div> |
| |
| <div class="column3"> |
| <div class="left blue2 f1"></div> |
| <div class="left blue3 f3"></div> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| Third<br> |
| </div> |
| </div> |
