<!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>